web-dev-qa-db-ja.com

Chrome mobileでスタンドアロンで実行されているWebアプリかどうかを検出する方法

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

参照 言う：

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

直接できません.

「直接」と表示されていることに注意してください。私の質問は、間接的にできますか？経験に基づいた推測を行うためのトリッキーな方法はありますか？

javascriptandroidgoogle-chromemobilemobile-safari
37
mike nelson

この答えには大きな遅れが伴いますが、解決策を見つけるのに苦労している他の人々のためだけにここに投稿します。

Googleは最近、CSS条件付きdisplay-mode: standaloneを実装したため、アプリがスタンドアロンで実行されているかどうかを検出する方法は2つあります。

CSSを使用する：

@media all and (display-mode: standalone) {
    /* Here goes the CSS rules that will only apply if app is running standalone */
}

CSSとJavascriptの両方を使用：

function isRunningStandalone() {
    return (window.matchMedia('(display-mode: standalone)').matches);
}
...
if (isRunningStandalone()) {
    /* This code will be executed if app is running standalone */
}

さらに情報が必要な場合は、Google Developersにこのトピック専用のページがあります。 https://developers.google.com/web/updates/2015/10/display-mode

47
josemmo

iOSとChrome WebAppは異なる動作をします。

isInWebAppiOS = (window.navigator.standalone == true);
isInWebAppChrome = (window.matchMedia('(display-mode: standalone)').matches);

ここと同じ： iOSがwebappを使用しているかどうかを検出

17
Javan R.

IOSでは、window.navigator.standalone確認するプロパティ..

ただし、ChromeではAndroidでは、このプロパティはサポートされません。これを確認する唯一の方法は、画面の幅と高さを計算することです。

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

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

以下のリンクから参照を得ました：

Android Thanks to Chrome 31 のホーム画面Webアプリ

13
murli2308

古い質問ですが、Chrome Android。

方法の1つ（最もクリーンなIMO）。通常のホームページにクエリ文字列パラメータを追加する値を持つ「start_url」キーを使用して、Webアプリマニフェストを追加できます。

例：-ホームページの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/

5
utkarshmail2052

IOSでは、スタンドアロンモードとWebモードのローカルストレージは異なります。 Android KitKatとChromeでは、Webバージョンのlocalstorageに値を保存すると、スタンドアロンモードで値を取得できます。

したがって、ユーザーが（ホームスクリーンに追加する前に）Webバージョンを閲覧しているときは、document.documentElement.clientHeightをlocalstorageに保存するだけです。次に、document.documentElement.clientHeightの現在の値をlocalstorage値と比較します。現在の値が>の場合、スタンドアロンモードです。

いくつかのデバイスで試しました。

4
yoandm

Google Chrome（Android）以降のバージョン39以降では、Webアプリケーションマニフェスト（json）を使用し、単一ページアプリケーションの場合、この「トリック」を使用します。

Manifest.jsonに次のように入れました："start_url": "standalone.html"。

通常は（私の場合はindex.html）ですが、index.htmlから同一のクローンを作成します：standalone.html（またはお好きなもの）。

次に、確認するために、次のようなJavascriptを使用します。

var locurl = document.location.href;
if (locurl.indexOf("standalone.html") != -1) {
    console.log("app is running standalone");
} else {
    console.log("app is running in normal browser mode");
}

動作します。

Google Chrome（モバイル）バージョン31-38で次のメタタグを使用しても動作する可能性があります。

<meta name="application-url" content="http://my.domain.com/standalone.html">。まだテストされていません。

1
Klaus

MIT AI2 webviewで実行されているかどうかを検出するには：

if (typeof window.AppInventor!="undefined") { return true; }
0
Nezumi