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

Posted 2023-02-16

【中文标题】如何将 manifest.json 的 start_url 设置为站点的根目录？

【英文标题】：How do I set the start_url of a manifest.json to be the root of the site?

【发布时间】：2018-01-06 19:07:59

【问题描述】：

我有一个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 和 not https://example.com/index.html 开始。 PWA 可能放在不同的域中，因此start_url 需要是相对的，而不是绝对的。

【问题讨论】：

您可以为start_url 使用相对路径，所以"start_url" : "./index.html" 应该可以工作- 或者这不是您的意思？另见：developer.mozilla.org/en-US/docs/Web/Manifest#start_url.

@TomDavies 然后用户转到https://example.com/app，但起始 URL 变为https://example.com/app/index.html 或https://example.com/index.html。

目前尚不清楚为什么 Tom 的回复无法完成您的要求。使用"./index.html" 或"./"（如果你不想包含index.html，出于某种原因）应该可以工作。

@JeffPosnick 所以用户在https://example.com/app 上并添加了一个基于https://example.com/app/manifest.json 的应用程序——当他们点击/点击它时，它会转到https://example.com/app/index.html。它具有相同的内容，但是是浏览器的新路径，除非我手动执行，否则不会缓存 - 很简单，但是添加额外的重复路由感觉很笨重。

在这种情况下您可以使用"./"。但我也建议使用知道./ 和./index.html 代表同一个文档的软件缓存解决方案，而不是在完成导航时对它们中的每一个进行不同的处理。例如，sw-precache 将生成一个 SW，默认情况下使用相同的缓存 HTML 文档响应它们：github.com/GoogleChrome/sw-precache#directoryindex-string

【参考方案1】：

除了将您的start_url 更改为

"start_url": "/"

或子目录（详见Keith's answer）

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

对于在 android 中的 Chrome 浏览器上测试 manifest 中的 start_url 更改的人员，这些更改可能不会立即反映给您的 PWA 用户。根据docs，

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

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

【参考方案2】：

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

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

"start_url": "/index.html"

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

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

参考文献：

Web 应用清单配方书：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

【讨论】：

Caleb 谢谢，但这不是我要问的——我将外部用户引导到example.com，然后服务器会提供一个默认页面（它是index.html，但它可以是default.asp 或其他任何东西，这取决于服务）。用户永远不会在 URL 中看到 example.com/index.html。现在，在example.com/mainifest.json 中，我不想将用户定向到 example.com/index.html（尤其是因为用户不会将其缓存，从而破坏 PWA），我想将它们定向到 example.com - 请参阅接受的答案以了解如何这样做。

@Keith：好的，但是在从 web manifest.json 文件的 start_html 获取（400）个请求后考虑页面之间的路由可能会很好，如@Eric V. 回答中提到的那样`json start_html = "/" sapui5.hana.ondemand.com/1.34.9/docs/guide/…> vaadin.com/docs/v13/flow/pwa/tutorial-pwa-web-app-manifest.html>

是的，您需要 start_url 中的任何路由来返回 200，如果它返回 400/错误请求，您的 PWA 将无法工作。正如我在对该答案的评论中解释的那样，Eric V 的答案不起作用，因为 "start_url": "/" 将子目录路由到域根目录。是的，路径也需要在 service worker 范围内。

【参考方案3】：

如果您在站点的根目录下运行，例如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/。

【讨论】：

在我的例子中，我使用 firebase 动态链接来缩短 url。所以example.com/app/**是动态链接。当我将 start_url 设置为“/”时，我得到一个 404 页面。你知道我应该如何处理它以便它也适用于动态链接吗？

@KyleAbens 这取决于链接在哪里是动态的 - 如果您使用 JS 重写在此处不起作用的 URL，但服务器端可以，只要 start_url 路径是相对的到清单的位置。

@angular/pwa 用户的评论。您还需要将ngsw-config.json 中的"index": "/index.html" 更改为"index": "/"。

【参考方案4】：

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

"start_url": "/"

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

【讨论】：

这在子文件夹中不起作用，因此https://example.com/test/ 将尝试（但失败）将根设置为https://example.com/

【参考方案5】：

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

【讨论】：

您好，欢迎来到 SO。为响应欢呼，但我认为您没有理解这个问题。在我的manifest.json 文件中，托管在我的Web 应用程序的根目录中，当start_url 也是Web 应用程序的根目录时应该设置什么。比如起始页是https://example.com，那么start_url的值在https://example.com/manifest.json中应该是什么？