Live Flowchart
This recipe provides a way to learn how to use service workers (SW) through showing the flow diagram of SW workflow explained on the Mozilla Developer Network, and logging on screen the steps taken by a real Web App running service workers.
Difficulty
Advanced
Screenshots
Register + Unregister
Active service worker on page load + unregister
Wrong service worker scriptURL
Security error
Features and Usage
Features are:
- Register a service worker
- Reload document
- Unregister the service worker
The features coincide to the buttons at the top of the page, which can be pressed in a whatever order. You can also specify the SW scriptURL and scope to simulate different test cases.
Usage:
- press buttons
- read the logs
- take actions in case (e.g. open about://serviceworkers)
- hack the code and see what happens
How to Read the Logs
There are two logs to read:
- the HTML log
- the browser log
In the HTML log colors mean different log levels:
- red => error
- yellow => warn
- green => info
- white => log
- gray => debug
The browser log prints:
- the same messages printed on the HTML log, using the same log level
- the service worker log (since service workers can’t access the DOM)
Compatibility
Tests have been run in:
- Firefox Nightly 44.0a1 (2015-10-12)
- Chrome Canary 48.0.2533.0
- Opera 32.0
on a machine running Mac OS X 10.8.5
Notes:
- the browser has to support ES6
What’s Next / Contributions
- responsive to work on mobile
- have the flowchart build in SVG and visualize the service worker states
- add specs / automatic tests for existing features
- add specs / automatic tests for new features in a BDD/TDD fashion
- do something oninstall
- do something onactivate
- do something onfetch
- provide a button to simulate the offline network status
- provide a button to simulate the lie-fi network status (very low connectivity but not completely offline)
Category
General Usage
Has it been useful?
Tell us what you think of this recipe by leaving a comment!