How to trigger the simple "Add to home screen" feature (the one without service worker)

Question

There are in fact two "Add to home screen" features on Android browsers:

• The popup dialog that is automatically showed on the bottom of Chrome Android when specific conditions are met (manifest.json available, having a service worker as discussed here, website visited at least twice in > 5 minutes, etc.)

  

• The Chrome menu item that we can trigger for any website, even if it does not have a service worker. This one simply creates a shortcut to the website on the home screen of the mobile device:

  

Question: How to add a button on a HTML page that triggers the creation of a home screen shortcut, like in the second bullet before? (i.e. for a very simple HTML website, without any service worker)

Answer 1

I believe that what you want to achieve is not yet possible. In order to be able to make a shortcut, a dedicated API would be needed for that. Until then, there is no API other than service workers that can achieve this.

Answer 2

What you need is BeforeInstallPrompt event.

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
    deferredPrompt = e;
});

const installApp = document.getElementById('installApp');

installApp.addEventListener('click', async () => {
    if (deferredPrompt !== null) {
        deferredPrompt.prompt();
        const { outcome } = await deferredPrompt.userChoice;
        if (outcome === 'accepted') {
            deferredPrompt = null;
        }
    }
});

Here is a article that might help you.

https://www.amitmerchant.com/adding-custom-install-button-in-progressive-web-apps/