1. ホーム
  2. javascript

[解決済み] PWAかMobile Webかを確認するJavascript

2023-06-21 06:02:11

質問

ウェブ体験が PWA (プログレッシブ ウェブ アプリ) として実行されているのか、それとも単に標準のモバイル ウェブサイト (フル ブラウザ UI) として実行されているのかを検出する、javascript ベースの方法を知っている人がいれば知りたいです。

インストールされている PWA と、そうでなくともサービス ワーカーやアプリ キャッシュが登録されている PWA との間に違いはありますか?

どのように解決するのですか?

分析目的であれば、マニフェストファイルの開始 URL にクエリ文字列パラメータを含むように設定することができます。

"start_url": "./?mode=standalone"

そして、JavaScriptで、このクエリ文字列パラメータをチェックすることができます。

更新日 (2020-08-19)

Pete LePage氏は、Google Analyticsのカスタムディメンションを設定する方法について、以下のコードを使って表示モードを確認するブログを書いています。 window.matchMedia :

let displayMode = 'browser';
  const mqStandAlone = '(display-mode: standalone)';
  if (navigator.standalone || window.matchMedia(mqStandAlone).matches) {
    displayMode = 'standalone';
  }
ga('set', 'dimension1', displayMode);

もっと読む https://petelepage.com/blog/2020/08/measure-understand-how-installed-pwa-users-differ-from-browser-tab-users/

更新しました(2017-01-20)。

または、JavaScriptを使用して確認することもできます。

if (window.matchMedia('(display-mode: standalone)').matches) {
  console.log("This is running as standalone.");
}