Images play an important role on the web today. Imagine a world without images on our web pages! High quality images can really make a website stand out, but unfortunately they come with a price to pay. Due to their large file sizes, they are bulky to download and result in slow page load times. If I'm a user with a low bandwidth connection, it can be a pretty poor experience.
Service Worker has already been here for a while: since 2015-09 it has been fully supported in Chrome/Opera and if compared to what we have today it has gone a promising way of improvements, bug fixes, became more easily debuggable and is supported much widely (hello Firefox). That led us into using the technology in production and implementing it in our kollegorna.se website, as well as some client projects. We’ve learned there quite a few gotchas to grasp in order to get Service Worker working correctly…
The recipe provides a service worker responding from cache to deliver fast responses and also updating the cache entry from the network. When the network response is ready, the UI updates automatically.
Note: I just spoke at Coldfront 2017 about why I’m such a big proponent of the Web. What follows is essentially that talk as a blog post (I’ll add a link to the video once it is published).
Introducing Redux Offline: Offline-First Architecture for Progressive Web Applications and React…
Service Workers: Dynamic Responsive Images using WebP Images | Dean Hume
Welcome to Workbox
Service Workers – Part 3 – Communication between SW and Pages | db writeups
Service Worker gotchas
Cache, update and refresh Recipe - Caching strategies - ServiceWorker Cookbook
Betting on the Web
DevDocs API Documentation