resources-manifest.json file with the filenames you want to cache & update the Service-Worker so that the browser reloads it.
Recently I wanted to add offline support for a personal project. I rejected any sollution which does the all the work, since I wanted to have full control over the service-worker code - in other words to write it myself.
So, I ran into a problem: how do I know which assets to cache if webpack keeps changing their names?
That's why I wrote this plugin, to help me with that by creating a
resources-manifest.json file which contains the filenames of the assets I want to cache.
Also, it updates the service-worker.js file so that the browser reloads it.
$ npm install resources-manifest-webpack-plugin --save-dev
In order to use this plugin, add it to your webpack config.
const ResourcesManifestPlugin = ;moduleexports =plugins:;
new ResourcesManifestPlugin([config], [path], [maxSize] );
The resulted file will contain a list of names which match the RegExp.
Instead of putting all the filenames in one array you can also split them up and apply different cache policies to each category. For example, if you'd like to create the following
just pass an Object whose values are RegExp's and the keys are the properties from above.
moduleexports =plugins:"SOURCE_CODE": /\.$/"OTHER_ASSETS": /\.jpeg?$/;
Where to output the
resources-manifest.json file. By default in the root of the project.
Filter just those assets which are under the specified size in kilobytes.
⚠ Service Worker update
Changing just the
resources-manifest.json file, doesn't update the SW in the browser. In order to do this we need to change at least 1 byte in it's code. This plugin helps with that too. With every build, it will search in the
service-worker.js file for the declaration of a constant named VERSION and will increase it's value. This small change is enough for the browser to update the service-worker. Hooray! <3
const VERSION = 1;self;// ...
After build service-worker:
const VERSION = 2;self;// ...
the rest of the service-worker code remains unchanged
const VERSIONdeclaration can be anywhere in the file, not necessarily at the top.
const /* random comment */ VERSION = 5;will not work so please don't put comments there.
Coded with ❤ by Pava