web-dev-qa-db-ja.com

PWAまたはモバイルWebかどうかを確認するJavascript

WebエクスペリエンスがPWA（プログレッシブWebアプリ）として実行されているか、単に標準のモバイルWebサイト（フルブラウザUI）として実行されているかを検出するためのJavaScriptベースの方法を誰かが知っていたら興味がありました。

「インストール済み」のPWAと、サービスワーカーやアプリキャッシュがまだ登録されていないPWAに違いはありますか？

javascriptprogressive-web-apps
31
PorcupineRending

これが分析目的の場合、マニフェストファイルで開始URLを設定して、クエリ文字列パラメーターを含めることができます。例：

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

次に、JavaScriptでこのクエリ文字列パラメーターを確認できます。

更新済み（2017-01-20）：

または、次を使用してJavaScriptをチェックインできます。

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

これはChromeとSafariの両方で機能します：

const isInStandaloneMode = () =>
      (window.matchMedia('(display-mode: standalone)').matches) || (window.navigator.standalone);

 if (isInStandaloneMode()) {
    console.log("webapp is installed")
}
8
Gary Vernon Grubb

プログレッシブエンハンスメントは、いくつかの技術が関与する特定の機能や方法というよりも概念です。現在、プログレッシブWebアプリはサービスワーカーに基づいており、ブラウザでサポートされているかどうかを確認できます。

// Check for browser support of service worker
if ('serviceWorker' in navigator)

プロジェクト lighthouse は、いくつかのテクノロジーの評価を実行することにより、アプリケーションがプログレッシブエンハンスドかどうかを検出するのに役立ちます。それを見てください。

enter image description here

明確にするために、このヘルプを願っています。

4
Hosar

Microsoft Visual Studio 2017で作成された私のPWAでは、次のステートメントが機能します：

var isPWA = navigator.userAgent.match(/MSAppHost/i);
0
stefischer