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

How do I set the start_url of a manifest.json to be the root of the site?

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

这是 index.html,它是网站的根目录。我希望这是 start_url,但从未要求该文件作为 URL。

如何将 start_url 指向站点的相对根目录?

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

我什至可以从 DevTools > Application > Manifest > start_url link 转到页面,在网络面板中切换到离线并重新加载页面并从 service worker 获取完整页面。

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

"start_url": "/"

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

如果您 运行 在站点的根目录中,例如 https://example.com/manifest.jsonhttps://test.example.com/manifest.json 您可以使用 "start_url": "/".

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

相反,如果您使用 sub-directory,则需要同时设置 scopestart_url:

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

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

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

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

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

记得添加连接到 index.html 页面的服务-worker.js。

您可以参考文档了解更多信息:

参考文献:

  1. Web 应用程序清单食谱书:https://developers.google.com/web/fundamentals/web-app-manifest

  2. 服务介绍-Worker.jshttps://developers.google.com/web/ilt/pwa/lab-scripting-the-service-worker

  3. 服务-Worker.js教程。 https://developers.google.com/web/ilt/pwa/lab-scripting-the-service-worker

除了将您的 start_url 更改为

"start_url": "/"

或子目录(详见

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

对于在 Chrome 浏览器 上 Android 上测试 manifest 变化的人来说,这些变化可能不会立即反映给您的 PWA 用户。根据 docs,

Chrome will periodically compare the locally installed manifest against a copy of the manifest fetched from the network. If any of the properties in the manifest required to add the PWA to the home screen have changed in the network copy, Chrome will request an updated WebAPK, reflecting those new values.

对于 Chrome(76 及更高版本)的新版本,此时间间隔为 1 天。对于 Chrome 75 和更早版本,此时间间隔为 3 天。这是我所经历的,我为强制 Chrome 获取新清单(用于测试和验证目的)所做的是 (1) 卸载 PWA,(2) 清除 Chrome数据,以及 (3) 重新安装 PWA