Определение статуса установки PWA - PullRequest
Новая
       5

Определение статуса установки PWA

6 голосов
/ 24 февраля 2020

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

Я знаю, что событие onbeforeinstallprompt сработает, когда появится возможность запросить установку, подразумевая, что приложение еще не установлено.

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

Я не могу полагаться на сохранение результата onappinstalled в LocalStorage, потому что LocalStorage может быть очищен во время установки приложения, а также приложение может быть удалено без очистки LocalStorage.

display-mode также бесполезно, так как можно переключаться в режим браузера, даже когда приложение установлено.

Как узнать состояние установки моего прогрессивного веб-приложения?

Ответы [ 2 ]

3 голосов
/ 10 марта 2020

Я думаю, что вы уже знаете ответ на свой вопрос, вы перечислили все доступные API и события с их минусами, но, похоже, вы ищете подтверждение

Так что да, есть нет способ узнать с точностью 100% , если PWA установлен, поскольку для него нет API

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

let isInstalled = localStorage.getItem('pwaInstalled') === '1' || false;

if (window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true) {
    // User is currently navigating on the PWA so yes it's installed
    localStorage.setItem('pwaInstalled', '1');
    isInstalled = true;
} else {
    //User is navigating in browser
    window.addEventListener('beforeinstallprompt', () => {
        localStorage.setItem('pwaInstalled', '0');
        isInstalled = false;
        //User can get an installation prompt meaning the app is not installed
    });
    window.addEventListener('onappinstalled', () => {
        localStorage.setItem('pwaInstalled', '1');
        isInstalled = true;
    });
}

Таким образом, у вас есть флаг pwaInstalled в локальном хранилище, сообщающий вам, установлено приложение или нет, если данные снят, флаг будет потерян, но в следующий раз, когда пользователь посетит PWA или браузер, этот флаг можно будет снова правильно установить в хранилище

Если пользователь удаляет приложение и посещает браузер, флаг будет удалено

Обратите внимание, что beforeinstallprompt event является экспериментальным (почти как все в PWA), он не запускается / не существует в некоторых браузерах, которые поддерживают установку PWA и может быть не совсем точным в других ( некоторые могут запустить его, даже если приложение уже установлено ). Оно также не будет срабатывать в течение 90 дней, если пользователь отклонил его

Однако, поскольку для отображения модальной кнопки / кнопки A2HS вы полагаетесь на beforeinstallprompt event. Не должно иметь значения, если он не срабатывает, оставляя только проблему, если он срабатывает, когда PWA уже установлен (я бы предложил проверить все поддерживаемые браузеры с различными версиями android, если вам нужно определить, какие из них не ' t)

В заключение, если предположить, что событие beforeinstallprompt запускает точно , тогда вы должны иметь , близкую к 100% точности, независимо от того, установлено приложение или нет

2 голосов
/ 25 февраля 2020

Вы можете проверить, использует ли пользователь установленную версию
Но, как вы упомянули, вы не узнаете, используют ли они версию браузера, а также установить ее

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

Скорее всего, если установлено, большинство людей будут использовать эту версию.

В своем коде проверьте, является ли окно автономным 

if (window.matchMedia('(display-mode: standalone)').matches) {  
    // do things here  
    // set a variable to be used when calling something  
    // e.g. call Google Analytics to track standalone use   
}
...