0

TL;DR: What I'm trying to figure out is how to configure my AppCache manifest so that only stores the root URL, plus any explicitly mentioned static files, and uses said root website as a fallback for any other URL, so that I can make it work with my SPA JS-based routing method.

I have an SPA that uses react-router and browserHistory to create clean URLs as if they're all separate websites.

The catch to make that work is that when we hit refresh, the webserver must serve the same index.html website (and then use JavaScript to read the url and do stuff). Ok, that's easy enough.

Now I'm trying to make the SPA work offline with AppCache (because I have to support Safari). The app works a bit like how Google Maps lets you share locations with the URL: it lets users share views into data sets with specific view settings through a simple link: /dataset/<dataset name>/<parameters>. So I basically want it to work off-line from both the main url, but also any possible path like this.

After a lot of trial and error (and Firefox's tools to debug the manifest) I got this:

CACHE MANIFEST
# dfb55f7a1c2f0ab09a93

/static/js/bundle.dfb55f7a1c2f0ab09a93.js

CACHE:
/
static/css/bundle.min.css

NETWORK:
*

FALLBACK:
/dataset/ /index.html

This lets me refresh and view dataset URLs when off-line¹ as desired! But now browsers don't just cache the root /, but also any /dataset/<foo>/<bar>. And if my users start passing urls around, they'll start caching each of those. That's not what I want either, because it's a waste of resources, and creates more complications when updating the App.

So where I'm stuck is how to configure my AppCache manifest so that only stores the root URL, plus any explicitly mentioned static files, while still letting me use said root website as a fallback for any other URL so that I can hit refresh while off-line.

¹ Well, assuming the dataset was visited an cached before; for that we use the localForage library. This is all working fine does not overlap with AppCache as far as I can see.

Job
  • 856
  • 10
  • 13

1 Answers1

0

Ok, the solution explained at this webpage worked for me:

http://dev.topheman.com/automate-appcache-offline-support-in-your-webpack-build/

The key thing that was different in the explanation here was this:

FALLBACK:
. offline.html

Specifically, every other site (and that includes the page on the normally-excellent MDN) would use this as their example:

FALLBACK:
/ offline.html

This invalidates the manifest (as can be tested in Firefox with SHIFT+F2, appcache validate). As explained in the text part of the MDN page:

FALLBACK: The FALLBACK: section specifies fallback pages the browser should use if a resource is inaccessible. Each entry in this section lists two URIs—the first is the resource, the second is the fallback. Both URIs must be relative and from the same origin as the manifest file. Wildcards may be used.

Chrome doesn't care, but Firefox does.

Job
  • 856
  • 10
  • 13