如何将 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.com
,start_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.json
或 https://test.example.com/manifest.json
您可以使用 "start_url": "/"
.
但是,这也会将 https://example.com/test/manifest.json
映射到 https://example.com/
,这会失败,因为它位于清单范围之外的文件夹中。
相反,如果您使用 sub-directory,则需要同时设置 scope
和 start_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。
您可以参考文档了解更多信息:
参考文献:
除了将您的 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
我有一个 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
需要是相对的,而不是绝对的。
我什至可以从 DevTools > Application > Manifest > start_url
link 转到页面,在网络面板中切换到离线并重新加载页面并从 service worker 获取完整页面。
您的 start_url 应在清单文件中设置为以下内容。
"start_url": "/"
来源:https://developers.google.com/web/fundamentals/integration/webapks
如果您 运行 在站点的根目录中,例如 https://example.com/manifest.json
或 https://test.example.com/manifest.json
您可以使用 "start_url": "/"
.
但是,这也会将 https://example.com/test/manifest.json
映射到 https://example.com/
,这会失败,因为它位于清单范围之外的文件夹中。
相反,如果您使用 sub-directory,则需要同时设置 scope
和 start_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。
您可以参考文档了解更多信息:
参考文献:
除了将您的 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