Once you’ve installed sw-toolbox, you’ll need to create a service worker file,
let’s call in
my-service-worker.js. It’s in this file that we’ll be using
sw-toolbox. But first we need to register our service worker.
From your web page, register your service worker file like so:
As implemented in Chrome 40 or later, a service worker must exist at the root
of the scope that you intend it to control, or higher. So if you want all of
the pages under
/myapp/ to be controlled by the worker, the worker script
itself must be served from either
/myapp/. The default scope is the
containing path of the service worker script.
For even lower friction you can instead include the Service Worker Toolbox companion script in your HTML as shown below. Be aware that this is not customizable. If you need to do anything fancier than registering with a default scope, you’ll need to use the standard registration.
<script src="/path/to/sw-toolbox/companion.js" data-service-worker="my-service-worker.js"></script>
Add Service Worker Toolbox to your service worker script
In your service worker you just need to use
importScripts to load Service Worker Toolbox
importScripts('bower_components/sw-toolbox/sw-toolbox.js'); // Update path to match your own setup
For more information on how to use the toolbox read the usage and api documentation.