parcel-plugin-precache-manifest

A simple Parcel plugin that generates a precache manifest that can be imported by service workers

Usage

The plugin generates a file similar to the following:

self.__precacheManifest = {
  "files": ["/index.html", "/client.33316f76.js", "/sw.js"],
  "ver": "a2eeefb1213a80f101f9d6f8687f5007"
}

All parameters have aliases. If you see inconsistencies in these docs, it's probably fine; you can use multiple names for one value.

The files key is a list of files to cache (paths depend on publicURL given to Parcel). ver is a hash of the build and will change itself if you ever update your app. It's useful for purging old cache when updating the client from a service worker.

The filename defaults to precache-manifest.js and the variable name defaults to __precacheManifest (like Workbox-based systems). However, you can customize this in package.json.

In service-worker.js:

importScripts('/myFilename.js'); // path depends on publicUrl param given to Parcel 
 
self.addEventListener("install", e => {
  // Array containing URLs of everything in the bundle is added to global scope of service worker in precache-manifest.js
  e.waitUntil(caches.open(myVariableName.ver).then(cache => cache.addAll(myVariableName.files)));
});

In package.json:

{
  "precacheManifest": {
    "filename": "myFilename.js",
    "variableName": "myVariableName"
  }
}

If you're want to completely guarantee that you don't use an old version of the manifest when updating your service worker, you can't (yet) use importScripts. However, you can set the option asJSON to true in package.json and make a fetch call instead. This has the added benefit of not adding an extra variable to the global scope. asJSON changes the default filename to precache-manifest.json, and the variableName parameter is no longer allowed.

In service-worker.js:

self.addEventListener("install", e => {
  e.waitUntil(fetch("/precache-manifest.json", { cache: "no-store" })
    .then(res => res.json())
    .then(manifest => caches.open(manifest.ver).then(cache => cache.addAll(manifest.files)))
  );
});

In package.json:

{
  "precacheManifest": {
    "asJSON": true
  }
}

Possibly the ultimate solution is to use the "inject" mode. It inserts the manifest at the top of the service worker, eliminating a need for an "importScripts" call. It's actually quite similar to Workbox Build inject mode. You provide either the filename for the service worker in the out directory or just true to automatically detect the SW.

In service-worker.js:

self.addEventListener("install", e => {
  caches.open(__precacheManifest.ver).then(cache => cache.addAll(__precacheManifest.files));
});

In package.json:

{
  "precacheManifest": {
    "inject": true
  }
}

License

MIT