Javascript, чтобы проверить, поддерживает ли PWA или мобильную сеть

Мне было любопытно, знает ли кто-нибудь из javascript-метода для определения того, запускался ли веб-интерфейс как PWA (прогрессивное веб-приложение), или просто запускался как стандартный мобильный сайт (с полным интерфейсом браузера).

Существует ли какая-либо разница между установленным PWA и тем, у которого нет, но все еще есть зарегистрированный сервис-сотрудник и/или кеш приложения?

Ответы

Ответ 1

Если это для аналитических целей, вы можете установить стартовый URL в файле манифеста, чтобы включить параметр строки запроса, например:

"start_url": "./?mode=standalone"

Затем в вашем JavaScript вы можете проверить этот параметр строки запроса.

Обновлено (2017-01-20):

В качестве альтернативы вы можете проверить JavaScript, используя:

if (window.matchMedia('(display-mode: standalone)').matches) {
  console.log("This is running as standalone.");
}

Ответ 2

Изменить 11 октября 2019 года: Добавлен дополнительный переключатель для проверки запуска приложения через TWA - document.referrer.include('android-app://')

Это работает для всех - TWA, Chrome & Safari:

const isInStandaloneMode = () =>
      (window.matchMedia('(display-mode: standalone)').matches) || (window.navigator.standalone) || document.referrer.includes('android-app://');

 if (isInStandaloneMode()) {
    console.log("webapp is installed")
}

Ответ 3

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

// Check for browser support of service worker
if ('serviceWorker' in navigator)

Проект lighthouse может помочь вам определить, является ли приложение прогрессивным расширенным, выполнив оценки нескольких технологии. Посмотрите на это.

Надейтесь на эту помощь, чтобы уточнить.

Ответ 4

if (window.matchMedia('(display-mode: standalone)').matches) {
  console.log("This is running as standalone.");
}

Этот ответ верный, но стоит упомянуть, что PWA может работать во многих режимах отображения:

полноэкранный режим
автономный
минимально-щ
браузер

Если вы запустите PWA в полноэкранном режиме, он вернет false, поэтому необходимы дополнительные проверки, такие как:

function isPwa() {
    var displayModes = ["fullscreen", "standalone", "minimal-ui"];
    displayModes.forEach(function(displayMode) {
        if (window.matchMedia('(display-mode: ' + displayMode + ')').matches) {
            return true;
        }
    });
    return false;
}

Обратите внимание, что проверка window.matchMedia вернет true для режима отображения "браузер", даже если это не установленное приложение PWA.

Ответ 5

В моем PWA, созданном с помощью Microsoft Visual Studio 2017, работает следующее утверждение:

var isPWA = navigator.userAgent.match(/MSAppHost/i);