[Javascript] Chromeモバイルでスタンドアロンで実行されているウェブアプリを検出する方法


Answers

IOSの場合、確認するwindow.navigator.standaloneプロパティがあります。

AndroidのChromeの場合、このプロパティはサポートされていません。 これを確認するには、画面の幅と高さを計算するしかありません。

以下はそれを確認するコードです:

navigator.standalone = navigator.standalone || (screen.height-document.documentElement.clientHeight<40)

私は下のリンクから参照を得ました:

ChromeのおかげでAndroid用のホーム画面のWebアプリ31

Question

Chromeモバイルでは最近、iOSと同様にホーム画面に追加できるようになりました。 これはクールですが、iOSと同様にサポートしていませんwindow.navigator.standaloneはサポートされていないため、スタンドアロンアプリとして実行しているかどうかを検出することはできません。

参照は言う:

アプリがインストールされたアプリとして実行されているかどうかを検出するにはどうすればよいですか?

あなたは直接、することはできません。

「直接」と言います。 私の質問は間接的に行うことができますか? 教育的な推測をするには、いくつかのトリッキーな方法がありますか?




IOSでは、スタンドアロンモードとWebモードのlocalstorageが異なります。 Android KitKatとChromeを使用すると、ウェブ版のlocalstorageに値を保存すると、スタンドアロンモードでその値を取得できます。

したがって、ユーザーがWebバージョンをブラウズしているとき(ホーム画面に追加する前)にdocument.documentElement.clientHeightをlocalstorageに保存するだけで済みます。 次に、document.documentElement.clientHeightの現在の値をlocalstorageの値と比較します。 現在の値が>の場合、スタンドアロンモードです。

私はいくつかのデバイスでそれを試してみました。




古い質問ですが、今日ChromeのAndroidで利用可能なソリューションが大幅に改善されました。

1つの方法(最もクリーンなIMO)。 'start_url'キーを使用してWeb Appマニフェストを追加し、通常のホームページにクエリ文字列パラメータを追加することができます。

例: - ホームページURLがhttps://www.example.comの場合 Webアプリケーションマニフェストセット

    "start_url": "https://www.example.com/?user_mode=app"

Webアプリケーションマニフェストに関するGoogleのガイド: https : //developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/