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

Keith_905 0
Viewed 48981

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.

manifest.json progressive-web-apps javascript
5 Answers

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.

Keith_9050
user_53075240

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
user_79611090

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

user_86808050

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

user_71038820
Related