Being offline or having poor connectivity can be frustrating, especially when you need to have access to information or make edits to a form you just filled in to get tickets to that gig you wanted to see. That continuous loading or default offline message is the bane of my existence when I’m travelling on public transport, but it doesn’t need to be. Service workers for offline caching can solve these issues but are often overlooked in the development process much to the detriment of the end user experience.
Service workers enhance the user experience by managing a cache of responses allowing the user to consume content or complete tasks without being none the wiser of poor or no connectivity and now supported in all modern browsers as of 2nd May 2018.
Workbox
Workbox is a service worker library from Google that allows you to add additional configurations for offline caching.
CLI
Add the Workbox CLI by running the following;
Wizard
Workbox wizard setup will help you identify which files you want to be precached and generates a configuration file named workbox-config.js
Build
To build your service worker, run the following to generate an sw.js file
Register the Service Worker
We now need to register the service worker for browsers that have the support and delay the registration until after the page has loaded, providing the user with good first experience. Add the service worker to your index.html before the closing tag.
Import & Precache
For a simple static site that won’t need updating for a long period of time, precaching is the best method as the user will have all of the assets after the first visit, this provides a fast reliable site with no network calls.
Precache also provides a revision property in the form of a hash; this allows you to update files and workbox automatically updates the cache in the browser replacing it with new files.
Strategies
Workbox offers a bunch of runtime strategies, three of the strategies I currently use are;
cacheFirst
cacheFirst will check the cache first if the request isn’t in the cache the network will be used and any valid response will be added to the cache before being passed to the browser.
staleWhileRevalidate
staleWhileRevalidate serves both cache and network in parallel it will serve a cache response first while updating the cache in the background with a fresh response from the network. If there is no cache, it will wait for the network response.
networkFirst
networkFirst forces a response to come from the network before falling back to the cache and is best used for API requests.
Adding a custom strategy
We can add custom strategy to the sw-custom.js file as shown below.
Once a custom strategy has been created, include the sw-customjs. file into the workbox-config.js
Then run workbox injectManifest again and you will now have an updated service worker file with both pre-cache and a custom strategy.
Offline Ready 💪
With Service workers, you’re on your way to providing a better offline experience that will keep your users from feeling the offline blues.
Below is a list of additional resources and tools to expand your understanding of service workers, diving into service workers has made me more aware of the excellent benefits they provide.
- W3C Service Worker Explainer
- Google Developers: Service Workers: an Introduction
- MDN: Service Worker API
- Google Lighthouse
- Promisees
- Workbox CLI 3.2.0
This post is also on Medium