1

I've recently made my first progressive web app (PWA), and I'm struggling to figure out a strategy for caching image assets. The PWA was specifically developed for mobile users on networks with slower-than-global-average download speeds. It's an image-heavy PWA for a digital exhibit of art works, here: https://caravans.library.northwestern.edu/

This is a one and done project (no push notifications, no user data collection, minimal updates). We want it to be install-able to make it easier to use on low-bandwidth networks and for the shell-like experience. At first, I wanted to limit the amount of network-requests users would need to make to install or use it offline. This led me to preaching EVERYTHING (about 12 MB). After more consideration, it felt wrong to create such a huge payload for a first visit.

I've now configured the service workers to pre-cache the HTML and cache the images at runtime. However, this will require more network requests to download the images. I think, maybe, it would be nice to set the PWA to runtime cache the images by default, and cache EVERYTHING if the user decides to install (i.e. 'Add to Homescreen') the PWA. I'm not sure if this is possible.

Is it ever a good idea to precache a ~12MB pwa? Which strategy would you use? Any advice would be appreciated.

Chris Diaz
  • 11
  • 2

1 Answers1

1

"Is it ever a good idea to precache a ~12MB pwa?" For some applications, yes. In the general case probably not but that is only because precaching usually means "precaching right away when the app/webpage is opened for the first time". This leads to poor user experience as you noted.

How about precaching the actually required assets (as you're now doing) and then caching some more when the user installs?

So:

  1. generate an array of files to be precached immediately (no big images)
  2. generate a second array of files to be precached when user installs (big images)
  3. listen for install event in app js code
  4. when install fires, send a message to the Service Worker with postMessage API
  5. SW adds array #2 to the cache using cache.addAll

Part 3 could also be "when opened from the homescreen". But you get the general idea.

Generating two arrays of files depends on your build system. Most likely there's nothing that does it for you automatically. Remember that you can also dynamically touch the array of files, eg. call filter() on it and so on inside the SW.

https://developer.mozilla.org/en-US/docs/Web/API/Cache/addAll, https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

pate
  • 4,937
  • 1
  • 19
  • 25