0

I would like to make an app available completely offline. ie user clicks a button (or not, this could happen automatically) while online and every page, including all dynamic pages, and assets on the site could be cached.

I understand I would need to generate a list of all assets, is there a tool that can do this, or any way built into sw-precache?

Also, how large can the cache be, and how long is it available? I assume it can be any size and available unless user specifically clears their browser cache.

riley
  • 2,387
  • 1
  • 25
  • 31

1 Answers1

0

If you have a local directory full of static files (HTML, JS, CSS, etc.), sw-precache can be configured to automatically precache all of them (or some subset of them) based on the patterns you pass in to the staticFileGlobs option. The previously precached entries in users' browsers will be kept up to date as you make local changes, regenerate your service-worker.js, and redeploy.

In general, there aren't hard upper limits on the maximum amount of data that can be stored using the Cache Storage API. It depends on the amount of space that's currently free (potentially along with other heuristics).

You should be considerate when determining what files get precached and ensure that they're actually files that your users are likely to find useful. For example, if the very first time a user visits your (hypothetical) documentation site, they end up downloading and storing thousands of individual HTML documents, that's a waste of bandwidth for both your servers and your users—in addition to taking up space on users' devices.

If you have a large trove of resources that are optional or not likely to be needed by all visitors, that using a precaching strategy for the crucial resources, along with a runtime caching strategy for the optional resources, is your best bet. You can combine the runtime caching strategy with a maximum cache size or maximum age, and the underlying sw-toolbox library will take care of deleting old entries for you.

Jeff Posnick
  • 53,580
  • 14
  • 141
  • 167
  • Thanks, that answers the storage limits. I have runtime caching setup to cache all content. Basically I would like to allow the user to cache all pages, including dynamically generated ones(updated my question), with the click of the button, to allow complete offline usage. As far as I can tell the only way to do this would be to visit every page to initialize the cache, there is no built in way to do this (without redeploying on any dynamic change)? – riley Apr 25 '17 at 18:38
  • It's possible to precache dynamic pages ahead of time if you know the possible URLs ahead of time, and use the https://github.com/GoogleChrome/sw-precache#dynamicurltodependencies-objectstringarraystring option. Since you mention "at the click of a button", that makes me thing that you don't want to precache, but rather cache-on-demand. You populate caches on demand do that from your page using `window.caches`, and then set up a route via `runtimeCaching` to serve those cached responses, using an appropriate update strategy (like `fastest`). – Jeff Posnick Apr 25 '17 at 18:41