Why it matters
A service worker sits between your pages and the network, so it decides what loads from the cache and what goes to the server. The right choice depends on the request: versioned assets can come from the cache forever, pages should be fresh but still work offline, and account or checkout pages should never be cached.
This builder turns a short list of routes into a complete sw.js using only the browser's Cache Storage and fetch APIs. Each route gets a strategy and limits, precached files are stored on install, a version number keeps caches separate, and an offline page covers navigations that fail. The table explains what every route will do.
How to use it
- List your routes in order, most specific first.
- Add the files to precache and an offline page.
- Set the version, then download sw.js and serve it from your site's root.
- Add the registration snippet to your pages.
FAQ
Which strategy should I use?
Cache-first for files whose URL changes when their content does, such as hashed assets and fonts. Network-first for HTML and API data. Stale-while-revalidate for images and data where a slightly old copy is fine. Network-only for anything private.
Why does the order of routes matter?
The first route that matches wins. Put network-only routes for account or checkout pages above the general navigate route, or those pages will be cached.
How do I update the service worker?
Change the version and deploy the new sw.js. Browsers check for a new worker on navigation; once it activates, caches from older versions with your prefix are deleted. Serve sw.js with Cache-Control: no-cache.
Do I need Workbox?
No. This sw.js uses the browser APIs directly. Workbox adds more options, such as background sync and broadcast updates, if you need them later.
