PWA Add to Homescreen

Question

i have create a add to homescreen with serviceworker.js and manifest, but this start's by pageload, i want to do it with a button.

<button onclick="downloadapp();">Download Web-App</button>
        
<script>
    function downloadapp(){
            
     if ('serviceWorker' in navigator) {
        console.log("Will the service worker register?");
        navigator.serviceWorker.register('service-worker.js')
          .then(function(reg){
            console.log("Yes, it did.");
         }).catch(function(err) {
            console.log("No it didn't. This happened:", err)
        });
     }
     
        }
</scirpt>

This is not working.

What exactly does "This is not working" mean? Can you give us more details like error messages? Also, take a look at this page https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen#javascript_for_handling_the_install , maybe this will help you — Alex Berger, Feb 10 '21 at 08:06

score 0 · Accepted Answer · answered Feb 11 '21 at 19:11

First of all for handling the Install option you need the service worker to be installed already. I suppose you want to add a customized button to install your web application for that you can add some event listeners as following

Your code needed to be updated with

<script>
     if ('serviceWorker' in navigator) {
        console.log("Will the service worker register?");
        navigator.serviceWorker.register('service-worker.js')
          .then(function(reg){
            console.log("Yes, it did.");
         }).catch(function(err) {
            console.log("No it didn't. This happened:", err)
        });
     }
</scirpt>

Code to handle service worker status and install event

<script>
    window.addEventListener("beforeinstallprompt", (e) => {
        // Prevent the mini-infobar from appearing on mobile
        e.preventDefault();

        // Stash the event so it can be triggered later.
        window.deferredPrompt = e;
        console.log("Registerd event");
        // Update UI notify the user they can install the PWA
        window.localStorage.setItem("pwainstalled", "false");
        //this.showInstallPromotion();
    });
    window.addEventListener("appinstalled", (evt) => {
        // Log install to analytics
        console.log("INSTALL: Success");
        window.localStorage.setItem("pwainstalled", "true");
    });
</scirpt>

Functions to manage and display button of install

<script>
    function installButtonDisplay() {
        var btn = document.createElement("BUTTON");
        btn.setAttribute("id", "install-button");
        btn.innerHTML = "Download Web-App";
        btn.onclick = function() {
          installPWA();
        }
        document.body.appendChild(btn);
    }
    function installPWA() {
        if (window.deferredPrompt) {
            console.log("inside window.deferredPromp if condition");
            window.deferredPrompt.prompt();
            window.deferredPrompt.userChoice.then((choiceResult) => {
               if (choiceResult.outcome === "accepted") { 
                  removeButton();                   
                  console.log("User accepted the install prompt");
               } else {
                  isInstalledState(false);
                  console.log("User dismissed the install prompt");
               }
           });
        }
    }
    function removeButton() {
        var elem = document.getElementById('install-button');
        elem.parentNode.removeChild(elem);
    }
</scirpt>

Note: You might need to add or remove code as per your use case, this is just for reference and better understanding.

thanks it works but unfortunately it doesn't work with iphone, do you have a solution? — Mertkan, Mar 12 '21 at 15:08
Hello @Mertkan, for iPhone you can refer following StackOverflow answer, Please accept, upvote, and share answer if it helped you https://stackoverflow.com/questions/51160348/pwa-how-to-programmatically-trigger-add-to-homescreen-on-ios-safari — Abhijeet Abnave, Mar 13 '21 at 16:50

PWA Add to Homescreen

1 Answers1