Skip to content

Webpack plugin that allows to cache generated assets in your own service worker.

License

Notifications You must be signed in to change notification settings

Hosar/sw-cache-plugin

Repository files navigation

sw-cache-plugin

CircleCI

Webpack plugin that allows to cache generated assets in your own service worker.

Description

Inspired by @goldhand SWPrecacheWebpackPlugin, for most all the cases SWPrecacheWebpackPlugin is the right choice. Use this plugin when you have your own service worker and you need to cache the Webpack generated assets which already include a versioning hash.

Version 1.0.0

Includes support for Webpack 4.16.5

Install

npm install sw-cache-plugin --save-dev

Basic Usage

//webpack.config.js

const swCachePlugin = require('sw-cache-plugin');

plugins: [
    new swCachePlugin(
      {
        cacheName:'cacheName',
        ignore: [/.*\.map$/],
        include: ['/','/additional']
      }
    )
  ]

This will generate an AssetsManager.js script file on your output path. Later in your sw.js file import the script. importScripts('/dist/AssetsManager.js');

Now you can use it to save the generated assets in the app cache as follow:

sw.js

importScripts('/dist/AssetsManager.js');
let assetsManager = new AssetsManager(); //create an instance of AssetsManager

//save the url-assets in cache
self.addEventListener('install', (event) => {
  event.waitUntil(assetsManager.addAllToCache());
});

Or remove:

self.addEventListener('activate', event => {
  event.waitUntil(assetsManager.removeNotInAssets());
});

Configuration

Plugin options:

  • cacheName: [String] name for your cache object.
  • ignore: [Array] regex to avoid assets to be included in the cache entries.
  • include: [Array] Additionals strings url to be included in the cache.

Methods:

  • addAllToCache() add all webpack generated assets to browser app cache.
  • removeNotInAssets() remove all current request that are in app cache, but not in the current webpack generated assets.

Properties:

  • cacheEntries [Array] contains an array with the url for all generated assets to be cached.
  • cacheName [String] app cache name.

Webpack dev server support:

About

Webpack plugin that allows to cache generated assets in your own service worker.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published