interpolate-sw-plugin

InterpolateSWPlugin is a webpack plugin that will replace, in your own implementation of a service worker, an auto generated cache version string and a list of webpack compiled assets for pre-cache purposes.

Notes:

• When developing with webpack dev server, the file will be watched for changes.
• When building assets, the file will be interpolated and copied to the destination folder configured in your webpack config.

Install

yarn add interpolate-sw-plugin --dev

Usage

"%SW_CACHE_VERSION%": An automatically generated version string for your cache. Use "%SW_CACHE_VERSION%" variable in your service worker. Please note the double quotes around "%SW_CACHE_VERSION%":

  caches.open('cache-name-v' + '"%SW_CACHE_VERSION%"') ...

"%SW_ASSET_FILES%": A coma-separated list of assets generated by webpack for pre-cache purposes. Use "%SW_ASSET_FILES%" variable in your service worker. Please note the double quotes around "%SW_ASSET_FILES%":

  cache.addAll(["%SW_ASSET_FILES%"]);

Call the plugin from your webpack configuration:

module.exports = {  
  plugins: [
    new InterpolateSWPlugin({
      // Your source sw template full path. Not opinionated service worker implementation having variables to be replaced.
      from: path.resolve(__dirname, './public/sw.js'),
      // Destination file inside your build directory, after replacing variables.
      to: 'sw.js',
      // Activate or deactivate replacement of the version variable %SW_CACHE_VERSION%
      replaceCacheVersion: true | false,
      // Activate or deactivate replacement of the files variable %SW_ASSET_FILES%
      replaceAssetFiles: true | false,
      // This config will replace your own Service Worker with a dummy one (if true),
      // effectively deactivates all service worker functionalities.
      deactivateSW: true | false,
    }),
  ]
}