Determining PWA installation status

Question

How can I determine whether or not my PWA is installed?

I know that the onbeforeinstallprompt event will trigger when there is an opportunity to prompt for installation, implying that the app is not yet installed.

I know that onappinstalled will trigger when the actual act of installing the app has occurred, but on subsequent page loads, this event does not trigger again.

I cannot rely storing the result of onappinstalled in LocalStorage because LocalStorage could be cleared while the app is installed, and also the app can be uninstalled without LocalStorage being cleared.

display-mode is also not useful, as it's possible to switch to browser mode even while the app is installed.

How can I know the installation state of my progressive web app?

Answer 1

I think you already know the answer to your question, you listed all the available APIs and Events with their cons, but you seem to be looking for a confirmation

So yes, there is no way to know with exactly a 100% certainty if a PWA is installed as there is no API for it

However the events you mentioned are complementary, so with a combination of them you can get pretty close

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;
    });
}

Like this you have the flag pwaInstalled in local storage, telling you if the app is installed or not, if the data is cleared the flag will be lost but the next time the user visits either the PWA or the browser, this flag can be set correctly again into storage

If the user deletes the app and visits the browser the flag will be deleted

Note that the beforeinstallprompt event is experimental (pretty much like everything in PWA) it does not fire/exist in some browsers that do support the installation of PWA and may not be fully accurate in the others (some may fire it even if the app is already installed) It will also not fire for 90 days if the user has dismissed it

However, since to display the A2HS modal/button you are relying on the beforeinstallprompt event. It shouldn't matter if it doesn't fire, leaving only a problem if it fires when the PWA is already installed (I would suggest a test on all supported browsers with different android versions if you need to determine which ones don't)

In conclusion, assuming the beforeinstallprompt event fires accurately then you should have close to a 100% accuracy on whether the app is installed or not