how to add custom install button for pwa

Question

I want to add custom install button for my progressive web app within the site. I read many articles and tried the answer provided by them. They use beforeinstallprompt

let deferredPrompt;

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

But the problem I am facing is I want the button to directly installed the PWA instead of triggering the installation prompt. Is it possible, if so how can I achieve that. Thank you in advance.

Answer 1

Try below code,

Step 1 - Create button or any controller

<button id="installApp">Install</button>

Step 2 - Add below js code in your scripts noy in serviceworker

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

Answer 2

The answer is, you can't. According to the manifest spec:

By design, this specification does not provide developers with an explicit API to "install" a web application.