如何防止添加到主屏幕 pwa 在网站的 www 版本上再次提示？

Question

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

我怎样才能防止这种情况发生，因为同一网站有两个 wpa 图标没用？

Answer 1

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

如果由于某种原因您不能这样做，在安装 PWA 时，您可以保存一个跨子域 cookie，只是为了设置用户安装 PWA 的“标志”。然后，在你的代码中你监听beforeinstallpromptevent，如果cookie存在就不要提示安装。

Answer 2

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

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

例子：

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