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

Question

I have a manifest.json and it has a start_url property that I want to point to the first file of my single page application.

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.

How do I point start_url at the relative root of the site?

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

Answer 1

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

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

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

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

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

Answer 2

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

"start_url": "/"

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

Answer 3

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.

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.

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

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

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

Answer 4

In addition to changing your start_url to

"start_url": "/"

or for sub-directory (see Keith's answer for details)

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

For the people testing the start_url changes in the manifest on Chrome Browser in Android, the changes may not reflect right away for the users of your PWA. According to the 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.

This period is in 1 day intervals for new versions of Chrome (76 and up). This period is in 3 day intervals for Chrome 75 and earlier versions. This is what I've experienced and what I've done to force Chrome to fetch the new manifest (for testing & validation purposes) was to (1) uninstall the PWA, (2) clear Chrome data, and (3) reinstall the PWA

Answer 5

In Create React App the start_url is set to "." which seems to do the job. But I didn't find any documentation confirming this yet.

Answer 6

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