The best way to go through the exercises is to serve each folder on your localhost. That way you can modify the code as you wish. If you have a web server already installed, such as Apache or Nginx, use them.
If not, a simple node.js based server that I use a lot for testing is http-server.
npm install http-server -g
To run, use the provided serve.bat or serve.sh scripts, or, from the command line, http-server [path] [options]
Alternatively, you can browse these pages on GitHub Pages. Though you won't be able to change the code. The URL will be https://morganconrad.github.io/serviceworkers/{exercise folder}/www/index.html
This shows how you can setup separate service workers per folder. It installs one service worker for
- index.html
- help.html (note - also in /)
- blog/
- users/
In the console, you will see the workers get registered, then log messages when they get called for a fetch.
Different Service Workers per folder is a reasonable idea: Blog vs. images. vs CSS, or security
Because two different workers (SW_01.js and SW_01_help.js) try to control the root directory, they swap back and forth.
- This is probably a bug in real code.
- In the Developer Console, note how they are waiting on each other...
- In all the other exercises, only a single service worker gets registered, at the root level.
One listener, named doNothing(), just logs. Since it doesn't call event.respondTo(), processing continues.
The second listener, realHandler(), responds by calling the normal fetch method, ending the listener chain.
Try swapping the order, putting realHandler first, and see if doNothing still gets called.
In a "real" example, one listener might handle HTML, another CSS, etc...
This example responds with either cached results (cacheFirstThenNetwork()), or responses from the network (networkFirstThenCache()).
Edit the code and see what happens. Note that more.html is deliberately left out of the initial cache, so it will always require one network call.
Illustrates how you could modify the response. For example, fetching some JSON data to use in a template engine like Handlebars.
- Use user's location to switch to a geographically closer server.
- Load Balancing
- Analytics