Как определить, работает ли веб-приложение автономно на мобильных устройствах Chrome

Chrome mobile недавно добавила возможность добавления на главный экран, аналогичный iOS. Это классно, но он не поддерживает его, а также iOS - он не поддерживает window.navigator.standalone, поэтому вы не можете определить, запущен ли он как автономное приложение.

Ссылка говорит:

Как определить, работает ли приложение в качестве установленного приложения?

Вы не можете прямо.

Обратите внимание, что это говорит "прямо". Мой вопрос: можем ли мы сделать это косвенно? Есть ли какой-то сложный способ сделать обоснованное предположение?

Ответы

Ответ 1

Этот ответ приходит с огромной задержкой, но я размещаю его здесь только для других людей, которые изо всех сил пытаются найти решение.

Недавно Google внедрил условный CSS, поэтому есть два возможных способа определить, работает ли приложение автономно:

Использование 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

Ответ 2

iOS и Chrome WebApp ведут себя по-разному, вот почему я пришел к следующему:

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

То же, что и здесь: Обнаружение, если iOS использует webapp

Ответ 3

Для IOS у нас есть свойство window.navigator.standalone для проверки..

Но для Chrome на Android он не поддерживает это свойство. Единственный способ проверить это - вычислить ширину и высоту экрана.

Ниже приведен код для проверки того, что:

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

Я получил ссылку из ниже ссылки:

Основные веб-приложения для Android Благодаря Chrome 31

Ответ 4

Старый вопрос, но значительно лучшие решения, доступные сегодня для Chrome Android.

Один из способов (чистейший ИМО). Вы можете добавить манифест веб-приложения с ключом start_url со значением, которое добавляет параметр строки запроса на вашу обычную домашнюю страницу.

Например: - если URL домашней страницы https://www.example.com. в наборе манифестов веб-приложений

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

Руководство Google по манифесту веб-приложения:https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

Ответ 5

В IOS локальный ресурс для автономного и веб-режима отличается. С помощью андроида KitKat и Chrome, когда вы сохраняете значение в localstorage в веб-версии, вы можете получить его в автономном режиме.

Итак, вам просто нужно сохранить document.documentElement.clientHeight в localstorage, когда пользователь просматривает веб-версию (перед добавлением на рабочий стол). Затем просто сравните текущее значение document.documentElement.clientHeight с значением localstorage. Если текущее значение > , это автономный режим.

Я попробовал это на нескольких устройствах.

Ответ 6

Для Google Chrome (Android) начиная с версии 39 с манифестом веб-приложения (json), и в случае, если это одностраничное приложение, я использую этот "трюк":

В манифесте. 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 (mobile) версии 31-38 с помощью этого метатега:

<meta name="application-url" content="http://my.domain.com/standalone.html">. Еще не проверено.

Ответ 7

Чтобы определить, работает ли он в веб-представлении MIT AI2:

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

Ответ 8

Не существует "правильного" способа сделать это на Android, поэтому поддержка API отсутствует. Обходной путь, который мы использовали в моей компании -

  • При первом входе в систему храните контрольный экран в localstorage. По screenHeight я имею в виду document.documentElement.clientHeight перед загрузкой страницы, с тех пор doc растет и не точная мера для реальной доступной высоты экрана.

  • Всякий раз, когда пользователь регистрируется в следующий раз - проверяет текущее экранирование и хранит - если он становится больше, пользователь переходит в полноэкранный режим.

Нет сценария, на котором он может уменьшиться, если вы хотите сохранить значение FIRST TIME для высоты экрана.

Caveat - пользователь, который будет чистить наличные деньги. Мы решили игнорировать это, поскольку большинство пользователей этого не делают или делают это относительно редко, и это будет достаточно (по нашему мнению) в течение некоторого времени, пока не будет исправлено API для этого (надеюсь, что будет:))

Вариант b - проверить доступную высоту экрана и высоту экрана устройства, совпадение для нескольких тестовых устройств и режимов браузера показало некоторый шаблон (доступная высота < 70 в webapp) - я уверен, что более широкое сравнение может получить значения, которые будут достаточны для 90% устройств в 90% случаев.

Все это обходное решение, конечно, не притворяясь надежным стабильным способом получить желаемую функциональность, но для нас это сработало, поэтому я надеюсь, что это поможет кому-то другому, кто воевал с этой ошибкой (возможно, api особенность другой способ). Удачи:) enter image description here