Проверьте, установлено ли уже Progressive Web App

Question

На моей веб-странице есть всплывающее окно, предлагающее пользователям установить наш PWA.Однако после его установки я не хочу спрашивать их снова.

Как я могу проверить, установлен ли PWA?

Answer 1

Следующий код исправил эту проблему.Сначала у меня есть кнопка с id="downloadli" и по умолчанию она скрыта или style="display:none"

Так как вам нужно добавить прослушиватель к beforeinstallprompt, чтобы запустить установку, если вы отбросили это действие, чтобы отобразитькнопка загрузки будет работать только тогда, когда возможна установка.

window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;

$('#downloadli').css('display', 'block');
});

Таким образом, если приложение уже установлено, beforeinstallprompt не добавляется на страницу и внутренняя часть этого блока не запускается.

Answer 2

Вы не можете проверить, установлен ли текущий пользователь PWA, но вы можете проверить, есть ли у пользователя pwa с автономным дисплеем.

if (window.matchMedia('(display-mode: standalone)').matches) {
  // your code here
}

Одним из решений является отслеживание того, как пользователи получают нажатие на вашу кнопку.прослушивая событие beforeinstallprompt .