He creado un complemento a la pantalla de inicio con serviceworker.js y manifiesto, pero este comienzo es por carga de página, quiero hacerlo con un botón.

<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>

Esto no está funcionando.

-1
Mertkan 10 feb. 2021 a las 10:58

1 respuesta

La mejor respuesta

En primer lugar, para manejar la opción Instalar, necesita que el service worker ya esté instalado. Supongo que desea agregar un botón personalizado para instalar su aplicación web para que pueda agregar algunos oyentes de eventos de la siguiente manera

Tu código necesitaba actualizarse con

<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>

Código para manejar el estado del trabajador del servicio y el evento de instalación

<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>

Funciones para administrar y mostrar el botón de instalación.

<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>

Nota: Es posible que deba agregar o eliminar código según su caso de uso, esto es solo para referencia y mejor comprensión.

0
Abhijeet Abnave 11 feb. 2021 a las 19:11