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

18

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

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

  

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

     

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

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

    
задан mike nelson 14.01.2014 в 23:26
источник

7 ответов

29

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

Недавно 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 имеет страницу, посвященную этой теме: Ссылка     

ответ дан josemmo 29.12.2015 в 18:38
источник
  • Chrome, очевидно, поддерживал режим отображения: автономно с ноября 2014 года, но лучше поздно, чем никогда :) –  Dan Dascalescu 13.01.2016 в 00:11
12

Для IOS у нас есть свойство window.navigator.standalone , чтобы проверить ..

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

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

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

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

Домашние веб-приложения для Android Благодаря Chrome 31

    
ответ дан murli2308 26.03.2014 в 09:01
источник
  • Если пользователь начинает в ландшафтном режиме, вам понадобится дополнительный код, например: if ((navigator.standalone = navigator.standalone) || (screen.height-document.documentElement.clientHeight <40 || screen.width -document.documentElement.clientHeight <40)) –  Christopher Grigg 13.01.2015 в 13:19
  • 40px не работает на более новых устройствах с дополнительной панелью пользовательского интерфейса внизу (вместо физического телефона) ... требуется еще ~ 80 или около того, и я не уверен, что этот пользовательский интерфейс является постоянной высотой устройства к устройству. –  Dan Tello 13.01.2015 в 23:45
  • Существует более надежный и совместимый со стандартами способ сделать это сейчас: display-mode: standalone. –  Dan Dascalescu 13.01.2016 в 00:13
5

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

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

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

ответ дан Javan R. 02.12.2016 в 13:33
источник
4

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

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

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

    
ответ дан yoandm 29.10.2014 в 14:12
источник
  • Интересный ответ. Было бы здорово увидеть пример кода. :) –  mhulse 04.05.2015 в 19:41
  • Существует более надежный и совместимый со стандартами способ сделать это сейчас: режим отображения: автономный. –  Dan Dascalescu 13.01.2016 в 00:13
2

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

Один из способов (самый чистый IMO). Вы можете добавить манифест Web App с ключом «start_url» со ​​значением, которое добавляет параметр строки запроса на вашу обычную домашнюю страницу.

ex: - если URL-адрес домашней страницы Ссылка . в Манифесте веб-приложений

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

Руководство Google о манифестах веб-приложений: Ссылка     

ответ дан utkarshmail2052 29.03.2017 в 14:23
источник
1

Для Google Chrome (Android) начиная с версии 39 с манифестом веб-приложения (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 (mobile) версии 31-38 с помощью этого метатега:

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

    
ответ дан Klaus 09.12.2014 в 17:09
источник
  • Я должен забрать это обратно. Это ненадежно. Firefox и Google Chrome (рабочий стол), похоже, следуют директиве start_url в файле manifest.json и переключаются на standalone.html. Сожалею. –  Klaus 09.12.2014 в 19:50
  • Этот трюк был официально задокументирован Google в разделе «Обнаружение», если вы запускаетесь с главного экрана. Вы пытались добавить параметр запроса вместо переименования файла? –  Dan Dascalescu 12.01.2016 в 23:59
-1

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

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

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

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

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

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

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

    
ответ дан Sergey Sob 28.06.2015 в 15:48
источник
  • Существует более надежный и совместимый со стандартами способ сделать это сейчас: режим отображения: автономный, на который отвечает @josemmo выше. –  Dan Dascalescu 13.01.2016 в 00:14