parcel-plugin-workbox-precache

Parcel plugin that generates a precache manifest json of the bundle to be injected into Workbox' precacheAndRoute.

Installation

npm i -d @nagyv/parcel-plugin-precache-json

or

yarn add --dev @nagyv/parcel-plugin-precache-json

Attention: parcel-bundler has to be installed

Usage

This module can be used to generate and load extra files to pre-cache with Workbox, like when a single service worker would be used to cache a main frame and an iframe at once.

Example code to load the generated json from /child/ directory:

// iframe precache handler
const childCacheName = 'child'
const childCache = new workbox.precaching.PrecacheController(childCacheName)

// as the iframe precache handler can not use `precacheAndRoute` we have to register a route
workbox.routing.registerRoute(
  new RegExp('/child/'),
  childCache.createHandler(true)
);

// as the iframe precach handler can no use `precacheAndRoute` we have to install the cache
self.addEventListener('install', (event) => {
  event.waitUntil(fetch('/child/precache.json').then(data => data.json()).then(precacheManifest => {
    childCache.addToCacheList(precacheManifest)
    return childCache.install()
  }).catch(err => {
    console.error('Failed adding extra pre-cache', err)
  }))
})

// as the iframe precach handler can no use `precacheAndRoute` we have to activate it
self.addEventListener('activate', () => {
  childCache.activate()
})

Credits

• The initial version was built on top of wearespindle/parcel-plugin-workbox-precache