在默认情况下，如果用户访问您的网站，并且浏览器确定该网站可以作为 PWA 安装，那么浏览器会显示一些内置的用户界面——例如 URL 栏中的一个图标——用于安装该网站。如果用户点击该图标，那么浏览器会显示一个安装提示，其中至少包含应用程序的名称和图标。如果用户同意安装该应用程序，那么它就会被安装。
然而，您可以实现自己的应用内用户界面来询问用户是否想要安装该应用程序，这将触发安装提示。这样做的好处在于：
您可以提供更多关于该应用程序的相关信息，向用户解释他们为什么可能想要将其作为 PWA 进行安装。
应用内的安装用户界面可能比浏览器的默认用户界面更容易被用户发现和理解。
添加应用内安装用户界面
首先，向应用程序添加一些用户界面元素，以表明用户可以安装它。例如：
html
复制到剪贴板
<button id=”install” hidden>安装</button>
我们设置了按钮的 hidden 属性，因为如果用户使用不支持安装的浏览器访问该应用程序，我们不希望安装用户界面可见。接下来，我们将看看如何使该按钮仅在支持本地安装 PWA 的浏览器上可见。
监听 beforeinstallprompt 事件
一旦浏览器确定可以安装该应用程序，它就会在全局 Window 范围内触发 beforeinstallprompt 事件。
在我们的主应用程序代码中，我们将监听此事件：
js
复制到剪贴板
// main.js
let installPrompt = null;
const installButton = document.querySelector(“#install”);
window.addEventListener(“beforeinstallprompt”, (event) => {
event.preventDefault();
installPrompt = event;
installButton.removeAttribute(“hidden”);
});
这里的事件处理程序做了三件事：
对事件调用 preventDefault() 方法。这可以阻止浏览器显示其自身的安装用户界面。
获取传递到处理程序的事件对象的引用。这是一个 BeforeInstallPromptEvent 实例，它使我们能够提示用户安装应用程序。
通过删除按钮的 hidden 属性来显示我们的应用内安装用户界面。
触发安装提示
接下来，我们需要为应用内的安装按钮添加一个点击处理程序：
window.addEventListener("beforeinstallprompt", async (event) => {
const relatedApps = await navigator.getInstalledRelatedApps();
// Search for a specific installed platform-specific app
const psApp = relatedApps.find((app) => app.id === "com.example.myapp");
if (psApp) {
event.preventDefault();
// Update UI as appropriate
}
});
发表评论