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

Question

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

javascriptandroidprogressive-web-appsmanifest.json

7

我们有一个网络应用程序，符合PWA标准。到目前为止，在Android设备上打开应用程序时，我们收到了PWA安装提示。

现在，如果可能的话，我们想在客户端动态生成manifest.json。我正在按照以下文章中概述的步骤进行操作，这看起来非常有前途：如何使用JavaScript动态设置Web应用程序清单我们通过客户端JS生成JSON并将其设置为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设置正确。请问有任何经验可以为PWA设置manifest.json吗？我可能漏掉了什么吗？

- qqilihq

1

你找到解决方案了吗？ - vDrews

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ethaning · Accepted Answer

我遇到了类似的问题。我的结论是，这个问题可能是由于浏览器在动态创建的清单被插入到DOM之前检查有效清单而引起的。

如果浏览器认为没有可用于PWA安装的有效清单，则不会显示安装提示，这在文档中已经明确说明了。但是，调试此问题相当令人困惑，因为工具（例如Google Chrome Audit DevTool选项卡中的Lighthouse）将显示应用程序可以安装并且一切正常...

可能情况是，浏览器只在页面加载时检查一个有效的清单 - 不幸的是，我找不到任何关于这方面的确切细节。

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