43

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.

Keith
  • 150,284
  • 78
  • 298
  • 434
  • 2
    You can use relative paths for `start_url`, so `"start_url" : "./index.html"` should work - or is that not what you meant? See also: https://developer.mozilla.org/en-US/docs/Web/Manifest#start_url. – Tom Davies Jul 31 '17 at 09:56
  • @TomDavies Then the user goes to `https://example.com/app` but the start URL becomes `https://example.com/app/index.html` or `https://example.com/index.html`. – Keith Jul 31 '17 at 10:14
  • 1
    It's not clear why Tom's response won't accomplish what you're asking for. Using `"./index.html"` or `"./"` (if you don't want to include the `index.html`, for some reason) should work. – Jeff Posnick Jul 31 '17 at 14:22
  • @JeffPosnick So user is on `https://example.com/app` and adds an app based on `https://example.com/app/manifest.json` - when they click/tap on that it goes to `https://example.com/app/index.html`. That has the same content, but is a new path to the browser and not cached unless I do it manually - easy enough, but it feels clunky to add the extra duplicate route. – Keith Jul 31 '17 at 15:31
  • 2
    You can use `"./"` in that case. But I'd also recommend using a SW caching solution that knew that `./` and `./index.html` represent the same document, instead of treating each of them differently when fulfilling a navigation. For instance, `sw-precache` will generate a SW that responds to both of them using the same cached HTML document same by default: https://github.com/GoogleChrome/sw-precache#directoryindex-string – Jeff Posnick Jul 31 '17 at 15:34
  • Have same problem.... – Kuvalda.Spb.Ru Apr 26 '18 at 17:03
  • I'm not sure it is real clear to others, but, using a relative url for either or both start_url and/or scope would place it in direct relationship to the url the manifest file is loaded from. The only way according to spec is to use absolute url's for scope and/or start_url. This opens an array of other situations such as the sw seeing the manifest and scope of the service worker. May even lead to a specific response header being returned, "service-worker-allowed" to allow it to happen. – aallord Sep 23 '19 at 21:01

6 Answers6

51

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
  • 150,284
  • 78
  • 298
  • 434
  • In my case I use firebase dynamic links to shorten urls. So `example.com/app/**`is the dynamic link. When I set the start_url to "/" I get a 404 page. Do you know how I should be handling this so that it also works with dynamic links? – Kyle Abens May 06 '20 at 10:25
  • 1
    @KyleAbens it depends where the link is dynamic - if you're using JS to rewrite URLs that won't work here, but server side you can, so long as the `start_url` path is relative to the location of the manifest. – Keith May 07 '20 at 15:00
  • Comment for `@angular/pwa` users. You also need to change `"index": "/index.html"` to `"index": "/"` in `ngsw-config.json`. – Halfist Jun 17 '20 at 07:24
11

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

"start_url": "/"

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

Eric V.
  • 194
  • 1
  • 8
  • 3
    This won't work in a subfolder, so `https://example.com/test/` will try (and fail) to set the root as `https://example.com/` – Keith May 14 '19 at 10:16
1

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

95faf8e76605e973
  • 13,643
  • 3
  • 24
  • 51
0

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
Caleb Yang
  • 83
  • 1
  • 12
  • Caleb thanks, but this isn't what I'm asking - I'm directing external users to `example.com`, the server then serves up a default page (it's `index.html`, but it could be `default.asp` or anything else, it's up to the service). The user never sees `example.com/index.html` in the URL. Now, in `example.com/mainifest.json` I don't want to direct users to `example.com/index.html` (especially as users won't have it cached, breaking the PWA), I want to direct them to `example.com` - see the accepted answer for how to do that. – Keith Oct 11 '19 at 15:08
  • @Keith: Ok but it may be good to think about routing between pages after getting (400) requests from the start_html of the web manifest.json file as mentioned in @Eric V. answer of ```json { start_html = "/" } – Caleb Yang Oct 12 '19 at 02:16
  • Yes, you need whatever route that's in the `start_url` to return 200, if it returns a 400/bad request your PWA won't work. Eric V's answer didn't work because `"start_url": "/"` routes sub-directories to the domain root, as I explained in a comment on that answer. Yes, the path also needs to be in the service worker scope. – Keith Oct 14 '19 at 17:27
0

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.

Andreas Riedmüller
  • 1,217
  • 13
  • 17
-2

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.

Codemaker2015
  • 12,190
  • 6
  • 97
  • 81
  • Hi and welcome to SO. Cheers for the response, but I don't think you've understood the question. In my `manifest.json` file, hosted in the root of my web application, what should `start_url` be set to when it is also the root of the web application. For instance the start page is `https://example.com`, what should the value of `start_url` be in `https://example.com/manifest.json`? – Keith Jul 12 '18 at 15:45