如何檢測 Web 應用程序是否在 Chrome 移動設備上獨立運行

Question

Chrome 移動版最近添加了添加到主屏幕的功能，類似於 iOS。 這很酷，但它不像 iOS 那樣支持它 - 它不支持window.navigator.standalone所以你不能檢測你是否作為一個獨立的應用程序運行。

參考文獻說：

如何檢測應用程序是否作為已安裝的應用程序運行？

你不能，直接。

注意它說“直接”。 我的問題是我們可以間接做到嗎？ 是否有一些棘手的方法可以做出有根據的猜測？

Answer 1

這個答案帶來了巨大的延遲，但我在這里發布它只是為了其他正在努力尋找解決方案的人。

最近 Google 實現了 CSS 條件display-mode: standalone ，因此有兩種可能的方法來檢測應用程序是否獨立運行：

使用 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

Answer 2

iOS 和 Chrome WebApp 的行為不同，這就是我開始關注的原因：

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

與此處相同： 檢測 iOS 是否正在使用 webapp

Answer 3

對於 IOS，我們有window.navigator.standalone屬性要檢查..

但是對於 Android 上的 Chrome，它不支持此屬性。 檢查這一點的唯一方法是計算屏幕寬度和高度。

以下是用於檢查的代碼：

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

我從以下鏈接獲得參考：

由於 Chrome 31，Android 的主屏幕網絡應用程序

Answer 4

對於 IOS，standalone 和 web 模式的 localstorage 是不同的。 使用 android KitKat 和 Chrome，當您在 web 版本的 localstorage 中保存一個值時，您可以在獨立模式下檢索它。

因此，您只需在用戶瀏覽網頁版本時（在添加到主屏幕之前）將 document.documentElement.clientHeight 保存到 localstorage。 然后，只需將 document.documentElement.clientHeight 的當前值與 localstorage 值進行比較。 如果當前值為 >，則為獨立模式。

我在幾個設備上嘗試過。

Answer 5

一個老問題，但今天可用於 Chrome Android 的更好的解決方案。

其中一種方式（最干凈的 IMO）。 您可以使用“start_url”鍵添加 Web App Manifest，該鍵的值會向您常用的主頁添加查詢字符串參數。

例如：- 如果主頁 url 是https://www.example.com 。 在 Web 應用程序清單集中

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

Google 關於 Web 應用清單的指南： https : //developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

Answer 6

對於帶有 Web 應用程序清單 (json) 的 39 版及更高版本的 Google Chrome (Android)，如果它是單頁應用程序，我會使用以下“技巧”：

在 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"> 。 還沒有測試。

Answer 7

要檢測它是否在 MIT AI2 webview 上運行：

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

Answer 8

您必須使用window.navigator.standalone ，此 API 僅適用於移動 IOS safari，而不適用於您的 macbook 或 iMac safari 上的事件...

Answer 9

在 Android 上沒有“正確”的方法可以做到這一點，因此還沒有 API 支持。 我們在我公司使用的解決方法 -

1. 首次登錄時，將屏幕高度存儲在 localstorage 中。 通過 screenHeight 我的意思是在頁面加載之前 document.documentElement.clientHeight，從那時起 doc 增長並且它不准確測量實際可用的屏幕高度。

2. 每當用戶下次登錄時 - 檢查當前屏幕高度與存儲的 - 如果它變大，則用戶已全屏顯示。

如果您確實為屏幕高度存儲了 FIRST TIME 值，則沒有任何情況下它會變小。

警告- 將清理現金的用戶。 我們選擇忽略這一點，因為大多數用戶不這樣做或很少這樣做，並且在一段時間內（在我們看來）就足夠了，直到有針對此的 API 修復（希望會有 :)）

選項 b - 檢查可用屏幕高度與設備屏幕高度，一些測試設備和瀏覽器模式的匹配顯示了一些模式（webapp 中的可用高度 < 70） - 我堅信更廣泛的比較可以獲得足以滿足 90% 設備的值在 90% 的情況下。

所有這些都是一種解決方法，當然，我並沒有假裝它是獲得所需功能的可靠穩定方式 - 但對我們來說它有效，所以我希望這可以幫助其他人與這個錯誤作斗爭（不能稱之為缺少其他重要的 api 功能）道路）。 祝你好運 ：）