5

How would one configure sw-precache to serve index.html for multiple dynamic routes?

This is for an Angular app that has index.html as the entry point. The current setup allows the app to be accessable offline only through /. So if a user go to /articles/list/popular as an entry point while offline they won't be able to browse it and would be given you're offline message. (although when online they'd be served the same index.html file on all requests as an entry point)

Can dynamicUrlToDependencies be used to do this? Or does this need to be handled by writing a separate SW script? Something like the following would do?

function serveIndexCacheFirst() {
  var request = new Request(INDEX_URL);
  return toolbox.cacheFirst(request);
}

toolbox.router.get(
   '(/articles/list/.+)|(/profiles/.+)(other-patterns)', 
    serveIndexCacheFirst);
mkhatib
  • 5,089
  • 2
  • 26
  • 35

2 Answers2

13

You can use sw-precache for this, without having to configure runtime caching via sw-toolbox or rolling your own solution.

The navigateFallback option allows you to specify a URL to be used as a "fallback" whenever you navigate to a URL that doesn't exist in the cache. It's the service worker equivalent to configuring a single entry point URL in your HTTP server, with a wildcard that routes all requests to that URL. This is obviously common with single-page apps.

There's also a navigateFallbackWhitelist option, which allows you to restrict the navigateFallback behavior to navigation requests that match one or more URL patterns. It's useful if you have a small set of known routes, and only want those to trigger the navigation fallback.

There's an example of those options in use as part of the app-shell-demo that's including with sw-precache.

In your specific setup, you might want:

{
  navigateFallback: '/index.html',
  // If you know that all valid client-side routes will begin with /articles
  navigateFallbackWhitelist: [/^\/articles/],
  // Additional options
}
Jeff Posnick
  • 53,580
  • 14
  • 141
  • 167
  • 1
    jeff, i get errors using navigate fallback. I use firebase authenticate to sign in using facebook Provider. So when i click login in with facebook with navigateFallback set to index.html, lots of unexpected error come up. How do i blacklist the url for signin with facebook or other providers? – jasan Sep 04 '16 at 16:35
  • There's a whitelist, rather than a blacklist: https://github.com/GoogleChrome/sw-precache/blob/master/README.md#navigatefallbackwhitelist-arrayregexp – Jeff Posnick Sep 04 '16 at 16:38
  • Jeff I'm rendering a 404 component any time a route(url) is enterd that is not defined in my app. . using the whitelist to approve my defined routes will work but than i can't render non-defined paths in offline – jasan Sep 04 '16 at 18:03
  • There's only support for one fallback page in `sw-precache` (at least for the time being; support for "real" routing to multiple pages will hopefully come in the future). It sounds like you'll have to write some additional code and use `importScripts()` to incorporate it if you need logic beyond what `sw-precache` supports right now. – Jeff Posnick Sep 06 '16 at 14:46
0

Yes, I think you can use dynamicUrlToDependencies, as mentioned in the documentation of the directoryIndex option: https://github.com/GoogleChrome/sw-precache#directoryindex-string.

Marco Castelluccio
  • 10,152
  • 2
  • 33
  • 48