动态设置清单时 PWA 安装提示

Question

我们有一个满足 PWA 标准的网络应用程序。至此，在安卓设备上打开该应用程序时，我们收到了 PWA 安装提示。

现在，如果可能，我们希望manifest.json在客户端动态生成。我正在遵循以下文章中概述的步骤，这些步骤看起来很有希望：

如何使用 Javascript 动态设置您的 Web 应用程序清单

我们生成 JSON 并通过客户端 JS 将其设置为 blob URL：

const stringManifest = JSON.stringify(manifest);
const blob = new Blob([stringManifest], { type: 'application/json' });
const manifestUrl = URL.createObjectURL(blob);
document.querySelector('#manifest-placeholder').setAttribute('href', manifestUrl);

但是现在，当我在 Android 设备上打开该应用程序时，我不再看到 PWA 提示。然而，清单文件显然会被解释，例如当我尝试将应用程序添加到主屏幕时，icon和start_url被正确设置。

这里的任何经验是否manifest.json可以为 PWA 设置？我可能会错过什么吗？

Answer 1

我遇到了类似的问题。我得出的结论是，此问题可能是由于浏览器在将动态创建的清单插入 DOM 之前检查有效清单造成的。

如果浏览器认为没有可用于 PWA 安装的有效清单，则不会显示安装提示，这在文档中已明确说明。然而，调试这个问题相当令人困惑，因为 Google Chrome Audit DevTool 选项卡中的 Lighthouse 等工具会说该应用程序是可安装的，并且一切都很好......

可能的情况是，浏览器在页面加载期间仅检查一次有效清单 - 不幸的是，我在任何地方都找不到与此相关的任何确切细节。

我能够通过确保 html 文档的初始渲染具有 PWA 安装的有效清单来解决此问题，其中包含一些默认值（在我的情况下，这些值基于window.location.pathname）。然后，当我拥有所有可用的适当数据时，我可以创建所需的清单并将其替换到 DOM 中。然后，当准备安装 PWA 时，浏览器将使用所需清单中的数据。