Is there a reusable Service Worker for caching?

Question

Given a simple, static website with multiple HTML files. I would like the website to be available offline, once loaded.

Is there a generic Service Worker (library on a CDN) which I can use by just referencing the .js?

I would like to extend my website with new HTML pages and resources (images) without having to change the Service Worker code. The new resources need to be available offline only after once loaded, of course.

Answer 1

I guess your question is how to cache new static files of your app which you add periodically, without changing the service worker.

You can cache with a wildcard on a path/under a folder. If you have all images under "/assets", you can add it to service worker like below(this is angular service worker syntax. your service worker might look different. But the key is "/assets/**"). You can do this for as many paths you have.

You might choose to serve your APIs or dynamic data under /api/ for example and you can exclude that from the cache.

{
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }