如何显示按钮以将应用程序作为 PWA 打开？

Question

如果应用程序未安装，我可以显示一个按钮来提示将应用程序安装为 PWA。

安装后，如果我通过地址栏再次访问应用程序 URL，安装按钮不存在（很好，因为我已经隐藏了它）...但是用户现在在浏览器中，而我希望它们是在独立应用程序中。

有没有办法可以显示一个按钮，让他们将应用程序作为独立的 PWA 打开，或者当他们通过地址栏中的 URL 导航到应用程序时自动打开 PWA？

接下来，我应该能够添加一个链接，但这不起作用：How to open PWA from a Button inside the web-app?.

尝试1：

<a href="Http://localhost:8081/">Open PWA</a>

尝试2：

window.open("Http://localhost:8081/")

两者都只是在新的 Chrome 选项卡中打开。

我的应用程序位于：http://localhost:8081/

我的清单包含以下内容：

"start_url": ".", "scope": "."

Answer 1

场景可能如下所示：

首先，在主应用程序代码中，您必须处理事件

"beforeinstallprompt"

。例如：

    window.onbeforeinstallprompt = event => {
        installButton.style.display = "block";
        installButton.onclick = () => event.prompt();
    }

在此处理程序中，我们假设您的 HTML 中有一些

<button>

元素，其 CSS 定义其样式为

display: none

。因此，当应用程序已安装时，它将被隐藏，并且

"beforeinstallprompt"

处理程序不会被调用，因此它将保持隐藏状态。

仅当应用程序未安装为 PWA 时，偶数才会被提高。您的处理程序将公开该按钮并设置其

"click"

事件处理程序。

event

对象具有请求用户确认的功能

prompt

，并在确认后执行安装。

在应用程序的 HTML 中，您必须引用并注册服务工作者脚本。我认为这里不适合解释它的作用，所以我只解释如何实现 PWA 安装部分。

一般来说，您可以在

windows

处理其

"load"

事件时一开始就这样做：

    window.onload = () => {

        if (navigator.serviceWorker 
            && (new URL(window.location).protocol == "https:"))
                navigator.serviceWorker
                   .register("pwa-service-worker.js");

        // ...
    }

在文件

"pwa-service-worker.js"

中，你必须处理

"install"

事件：

self.addEventListener("install", function(event) {
    event.waitUntil(
        caches.open(cacheName).then(function (cache) {
            return cache.addAll(initialCachedResources);
        })
    );
});

在这里，在此片段之前，您必须定义

cacheName

。它可以是一些用于在系统中唯一标识您的 PWA 应用程序的字符串。