检查是否已安装渐进式Web应用程序

Question

我的网页上弹出一个窗口，提示用户安装我们的PWA。但是，安装完成后，我不想再问他们。

如何检查PWA是否已安装？

Answer 1

您无法检查当前用户是否安装了PWA，但是现在可以通过独立显示检查用户是否使用了pwa。

if (window.matchMedia('(display-mode: standalone)').matches) {
  // your code here
}

一种解决方案是跟踪用户通过监听beforeinstallprompt事件来单击您的按钮的情况。

Answer 2

以下代码解决了此问题。首先，我有一个带有id="downloadli"的按钮，默认情况下它是隐藏的或style="display:none"

由于您必须在beforeinstallprompt上添加侦听器才能触发安装，如果您背负该操作以显示下载按钮，则该安装仅在可以安装时才起作用。

window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;

$('#downloadli').css('display', 'block');
});

这样，如果已经安装了应用，则beforeinstallprompt不会添加到页面中，并且不会运行此块的内部。