PWA環境下で実行されているかを判定する方法

PWA環境下で実行されているかを判定する方法:

はじめに

ReactやAngular、Vue.jsなどの主要なフレームワークを使えばワンステップ＋αで簡単に実装できるようになっていることからSSLさえ導入していればおまけ的に導入できるイメージのPWA。

実装を進めていくと「web表示だけ【ホーム画面に追加】の誘導モーダルを出したい」「PWAの環境下でのみストレージにデータを保持させておきたい」といったときにPWA環境か通常のブラウザかを判定する場面が多かれ少なかれ出てきます。

しかし、あまりここに触れている記事を見かけなかったので備忘録も兼ねて掲載します。

本題

メディアクエリのパース結果を利用してJavaScript上で判定します。

以下はmanifest.jsonでディスプレイモード「standalone」を指定した場合を想定しています。

if(window.matchMedia('(display-mode: standalone)').matches){ 
  // ここにPWA環境下でのみ実行するコードを記述 
} 

メディアクエリということはCSSでもPWA環境下のみで反映する設定を以下のように簡単にかけます。

@media (display-mode: standalone){ 
  /* ここにPWA環境下でのみ実行する設定を記述 */ 
} 

PWAのディスプレイモード設定を「standalone」に設定する方が大半だと思われますが「browser」設定はブラウザでもマッチしてしまうので注意してください。