PWA 添加到主屏幕

Question

我已經使用 serviceworker.js 和清單創建了一個添加到主屏幕，但是這是通過頁面加載開始的，我想用一個按鈕來完成。

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

這是行不通的。

Answer 1

首先，要處理安裝選項，您需要已經安裝服務工作者。 我想您想添加一個自定義按鈕來安裝您的 web 應用程序，您可以添加一些事件偵聽器，如下所示

您的代碼需要更新

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

處理服務工作者狀態和安裝事件的代碼

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

管理和顯示安裝按鈕的功能

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

注意：您可能需要根據您的用例添加或刪除代碼，這僅供參考和更好地理解。