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

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

提问by Keith

I have a manifest.jsonand it has a start_urlproperty that I want to point to the first file of my single page application.

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

This is index.html, and it's the root of the site. I want this to be the start_url, but that file is never asked for as a URL.

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

How do I point start_urlat the relative root of the site?

如何指向start_url站点的相对根？

For instance, suppose the site is at https://example.com, what should the value of start_urlbe in https://example.com/manifest.json? I want the PWA to start at https://example.comand nothttps://example.com/index.html. The PWA might be put on a different domain, so start_urlneeds to be relative, not absolute.

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

采纳答案by Keith

If you are running in the root of a site, for instance https://example.com/manifest.jsonor https://test.example.com/manifest.jsonyou can use "start_url": "/".

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

However, this will also map https://example.com/test/manifest.jsonto https://example.com/, which fails because it's in a folder outside the scope of the manifest.

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

Instead, if you are using a sub-directory you need to set both a scopeand the start_url:

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

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

This will cause https://example.com/test/manifest.jsonto map to https://example.com/test/as expected.

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

回答by Eric V.

Your start_url should be set to the following in your manifest file.

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

"start_url": "/"

Source: https://developers.google.com/web/fundamentals/integration/webapks

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

回答by Caleb Yang

It is important to understand where the page is relative to the server. The local host or where you are accessing the website from starts for node.js servers.

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

For example if I want to run my website from manifest.json to be the root website, this is what I will write. In this basis, the root page of the file is index.html.

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

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

Remember to add a service-worker.js that connects to the index.html page too.

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

You can refer to the documenation for more information:

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

References:

参考：

1. Web App Manifest Recipe Book: https://developers.google.com/web/fundamentals/web-app-manifest

2. Introduction to Service-Worker.js https://developers.google.com/web/ilt/pwa/lab-scripting-the-service-worker

3. Service-Worker.js tutorial. https://developers.google.com/web/ilt/pwa/lab-scripting-the-service-worker

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

2. Service-Worker.js 介绍https://developers.google.com/web/ilt/pwa/lab-scripting-the-service-worker

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

回答by Codemaker

I can even go from DevTools > Application > Manifest > start_urllink to the page, switch to offline in network panel and reload the page and get the full page from the service worker.

我什至可以从DevTools > Application > Manifest > start_url链接转到页面，在网络面板中切换到离线状态并重新加载页面并从 Service Worker 获取完整页面。