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

首先，为了处理 Install 选项，您需要先安装 service worker。我想你想添加一个自定义按钮来安装你的网络应用程序，你可以添加一些事件监听器如下

您的代码需要更新

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

注意：您可能需要根据您的用例添加或删除代码，这仅供参考和更好地理解。

PWA 添加到主屏幕

PWA Add to Homescreen

javascript

progressive-web-apps