Question

我有manifest.json并且它有一个start_url属性，我想指向我的单页应用程序的第一个文件。

这是index.html，它是网站的根目录。我希望这是start_url，但该文件永远不会被要求作为URL。

如何将start_url指向网站的相对根目录？

例如，假设网站位于https://example.com，start_url的价值应该是https://example.com/manifest.json？我希望PWA从https://example.com开始，不 https://example.com/index.html。 PWA可能放在不同的域上，因此start_url需要是相对的，而不是绝对的。

Answer 1

您的清单文件中的start_url应该设置为以下内容。

"start_url": "/"

来源：https://developers.google.com/web/fundamentals/integration/webapks

Answer 2

如果您在网站的根目录中运行，例如https://example.com/manifest.json或https://test.example.com/manifest.json，则可以使用"start_url": "/"。

但是，这也会将https://example.com/test/manifest.json映射到https://example.com/，这将失败，因为它位于清单范围之外的文件夹中。

相反，如果您使用的是子目录，则需要同时设置scope和start_url：

"start_url": "./"
"scope": "."

这将导致https://example.com/test/manifest.json可以按预期映射到https://example.com/test/。

Answer 3

了解页面相对于服务器的位置很重要。对于node.js服务器，本地主机或您从中访问网站的位置。

例如，如果我想从manifest.json运行我的网站成为根网站，这就是我要写的内容。在此基础上，文件的根页面是index.html。

{
"start_url": "/index.html"
}

请记住添加一个也连接到index.html页面的service-worker.js。

您可以参考文档以获取更多信息：

参考文献：

Web App清单食谱书：https://developers.google.com/web/fundamentals/web-app-manifest
Service-Worker.js https://developers.google.com/web/ilt/pwa/lab-scripting-the-service-worker
Service-Worker.js教程。 https://developers.google.com/web/ilt/pwa/lab-scripting-the-service-worker

Answer 4

除了将您的start_url更改为

"start_url": "/"

或子目录（有关详细信息，请参见Keith's answer）

"start_url": "./"
"scope": "."

对于在Android的 Chrome浏览器中测试start_url中的manifest更改的人来说，这些更改可能不会立即反映给您的PWA用户。根据{{3}}，

Chrome会定期比较本地安装的清单反对从网络中获取的清单副本。如果有将PWA添加到主屏幕所需的清单中的属性网络副本已更改，Chrome会请求更新 WebAPK，反映出这些新价值。

对于新版本的Chrome（76及更高版本），此间隔为1天。对于Chrome 75和更低版本，此间隔为3天。这就是我的经验，我为强制Chrome获取新清单（出于测试和验证目的）所做的工作是（1）卸载PWA，（2）清除Chrome数据和（3）重新安装PWA

Answer 5

我什至可以从DevTools > Application > Manifest > start_url链接转到页面，在网络面板中切换为离线，然后重新加载页面并从服务人员那里获取完整页面。

如何将manifest.json的start_url设置为站点的根目录？

5 个答案: