Correct way to precache the root url ("/")

Question

I'm a bit confused about the correct way to precache the root url, namely "/".

If I use webpack-plugin-workbox to generate the precacheManifest, it doesn't include an entry for "/". "/index.html" is included of course. Now if the user loads the app, precaching kicks in, and the user tries to load the root url without network connectivity, the site won't load since precaching did nothing for the root url. If the user tries to load "/index.html" everything works nicely. But users don't load that url, they load the root url. So how to cache that?

Should I use the navigateFallback: index.html option which, in my understanding, redirects the user to the provided url in case of connectivity loss and cache miss?

Or should I use templatedUrls: { "/": [ "index.html" ] } option which, in my understanding, generates a hash based on the index.html and then caches "/" based on the changing of that hash value?

Or should I use some completely different strategy?

Thanks a million!

register a route for the root domain <empty url> , 2nd arg is a strategy.... workbox.routing.registerRoute( /^$/, workbox.strategies.staleWhileRevalidate(), ); — Robert Rowntree
– Robert Rowntree, Commented Apr 6, 2018 at 16:14
That is one way to do it. But is it the correct way with the other precaching logic? I think it's not. I think something should be placed in the precachingManifest. — pate
– pate, Commented Apr 6, 2018 at 16:35

Jeff Posnick · Accepted Answer · 2018-04-11 20:05:24Z

4

By default, when there's an initial precache miss for a URL that ends in /, Workbox will check its list of precached files again to see if there's a match for the same URL ending in /index.html.

You can read more about this, along with how to customize the default behavior, in the module guide for workbox-precaching.

So... things should work as you describe without your needing to do anything. (You need to make sure that you're testing after the service worker has activated and takes control over the current window client.)

If you're not seeing that behavior, it sounds like there might be a bug in Workbox, and it might be best to follow up in the issue tracker with more details.

answered Apr 11, 2018 at 20:05

Jeff Posnick

56.4k14 gold badges150 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pate Over a year ago

I see. Thank you. I now understand that my confusion came from this: my PWA, added to the homescreen, didn't work offline even though it worked offline when visited in the browser. I'm using InjectManifest version of the workbox-plugin-webpack and since it lacks the ignoreUrlParametersMatching option my PWA, which has the start_url of "/?home=1" didn't work offline. I started an issue about the missing config option at the tracker github.com/GoogleChrome/workbox/issues/1426

Collectives™ on Stack Overflow

Correct way to precache the root url ("/")

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related