- Load the page
- Turn Wi-Fi / Internet off
- Reload the page
Voila ! Page still loads. src/sw.js is where the Magic is!
Simply refer to src/sw.js script file in your site and the setup is done. To change what APIs and assets are cached, update variables CACHE_FILE_LIST and CACHE_API_LIST in src/sw.js
<script src="sw.js">Note: service worker file needs to be served from the root of the domain, as default. This path can be changed using header
Service-Worker-Allowed
There are multiple strategies one can implelment - network first, cache first, fastest first (race between network and cache). The choice depends upon the type of application and the situation one is trying to handle.
This application demonstrates:
- Cache First strategy - i.e. serve from service worker cache if available
- Cached API calls have a max age - we don't want to serve the same thing all life!
- Version controlled cache - updates on any change to sw.js
I have tried to use cache first for API calls, and cache all the time for static assets. The API calls are cached for 5 minutes.
There is a lot more one can do using service worker:
- Background data synchronization
- Push messages
- Responding to resource requests from other origins
- Hooks for background services
References:
- Jake Archibald's cookbook
- Good old MDN
- developers.google.com
Service Workers are now quite widely supported (except IE). Check caniuse for more detailed info.
The cache storage used by service workers do not get deleted by browser, ever, unlike browser cache, who have no reliability. So it is important to delete stale objects.