Tangible Bytes

A Web Developer’s Blog

Pwa Workbox Cache Static HTML

This site uses the workbox package to manage a service worker which is needed for the site to meet the criterion of a Progressive Web App

I only really did this as practice - it’s not really needed for a static website.

Today I reviewed my setup and fine tuned it.

Workbox offers a couple of modes - I use a simple command

workbox generateSW ./workbox-config.js

This drops into my build script and

  • creates a manifest with a hash for each file that gets cached
  • includes dynamically created files
  • uses the Cache First Policy


It’s really simple and I don’t have to write a custom Service Worker

It just caches stylesheets and the icons needed by a PWA.


You don’t have much control - the only caching policy is “Cache First” which works fine for dependent assets which can be fingerprinted and will be refreshed if a new version is needed.

It doesn’t work for HTML which contains the references - as there is nothing to trigger an update.

Which Mode to Use


Workbox can generate a minimal service worker - but it really is minimal.

There isn’t much you can do with it - and caching static HTML is probably a bad idea as it will never update.

If you want a more subtle caching policy you need to create your own service worker and perhaps use workbox injectManifest merge this manifest with files generated by previous build steps.