如何防止 Add to home screen pwa 在网站的 www 版本上再次提示？

Question

我可以在我的网站上获得“添加到主屏幕”弹出窗口 example.com 但是当我使用 www.example.com 打开我的网站时，我再次获得弹出窗口并点击添加，它在主屏幕中再次添加 wpa。

如何防止这种情况发生，因为同一网站有两个 wpa 图标是没有用的？

Answer 1

最简单的选择是将 www 调用重定向到 non-www 调用。所以用户实际上永远不会留在那个不同的子域中。

如果由于某种原因您不能这样做，在安装 PWA 时，您可以保存一个跨子域 cookie，只是为了 "flag" 设置用户安装了 PWA。然后，在您的代码中监听 beforeinstallprompt 事件，如果 cookie 存在则不提示安装。

Answer 2

您可以添加一些 JavaScript 代码，以便在用户访问 www 网站时删除以下标记。

<link rel="manifest" href="/manifest.json">

示例：

if (window.location.host.startsWith('www.') {
    const manifestLink = document.querySelector("link[rel='manifest']")
    manifestLink.parentNode.removeChild(manifestLink)
}