- It’s currently March 2018
- I’m using WebPack 4.2.0
The code has been reproduced below in gists.
I used version 4.9.0 at the time of writing.
yarn add offline-plugin
npm install offline-plugin
1 – Add offline-plugin to your Webpack config file:
2 – Then, add the runtime into your entry file (typically main entry):
3 – Configure as your project requires.
Service Workers can generally only own files that are located under the location of the ServiceWorker script unless explicitly specified by both Client and Server – see here.
This means you will generally host your Service Worker script at the root level of your site e.g. https://myawesomeapp.com/service-worker.js. This allows the Service Worker to cache all files on your site.
Using the offline-plugin configuration options you can tell the plugin to output the generated Service Worker at the root level of our project. I highly recommend you also set minify to false to prevent conflicts with existing minifiers that may be running.
You can learn about Service Workers here: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
And you can read the W3C spec here: https://www.w3.org/TR/2017/WD-service-workers-1-20171102/