How to display a “new version available” for a Progressive Web App

Dean Hume: I’ve built a number of Progressive Web Apps that simply update the service worker silently for the user in the background, but I really like the approach where you get a popup notification that suggests that there is a new version of the site available like Google’s Inbox provides – especially for an […]

Implementing Web Push Notifications

Alexander Zlatkov from SessionStack on how to implement Web Push Notifications: There are three general steps to implementing a push: The UI — adding the necessary client-side logic to subscribe a user to a push. This is the JavaScript logic that your web app UI needs in order to enable the user to register himself to push […]

PWAs are coming to iOS 11.3: Cupertino, we have a problem

Recently it was announced that iOS 11.3 and macOS 10.13.4 will include Service Workers, opening up the way for PWAs on iOS (and potentially macOS too, following lead of Microsoft here). ☝️ If you don’t want to download the macOS 10.13.4 beta you can alternatively download Safari Technology Preview (> 48) for use with your […]

Network based image loading using the Network Information API in Service Worker

Clever use of a service worker in combination with navigator.connection.effetiveType by Michael Scharnagl. The SW watches all requests for image resources, and rewrites them to high resolution versions in case navigator.connection.effetiveType is fast enough. Network based image loading using the Network Information API in Service Worker →

Tame your Service Worker before your Progressive Web App go into the wild

Slidedeck by Maxim Salnikov: With great power comes great responsibility – trivially, but true: I’ll show the examples of how easy the “Progressive” part of the PWA term could become “Regressive”, how to fix this, and how to test our Service Worker before deploying your app. First, we’ll go through the well-known PWA functionality (App […]

sw-toolbox – A Collection of Tools for Service Workers

Service Worker Toolbox provides some simple helpers for use in creating your own service workers. Specifically, it provides common caching strategies for dynamic content, such as API calls, third-party resources, and large or infrequently used local resources that you don’t want precached. The code itself is very readable I must say: importScripts(‘sw-toolbox.js’); toolbox.precache([ ‘/css/app.css’, ‘/img/logo.png’ […]

Implementing “Save For Offline” with Service Workers

Una Kravets implemented “Save For Offline” on her blog, using Service Workers. She described the reasoning, process, and code to implement. With “Save For Offline”, if someone is reading your blog on the subway, and loses their Internet connection, they won’t lose their place. If they accidentally click and the browser refreshes, they won’t lose […]

Supercharging page load

Jake Archibald introduces how making simple changes to Service Worker can vastly improve the startup and load performance of your web site. In this video Jake shows how he has made his Wikipedia application not only work offline but amazingly performant too. Jake, in his typical Jake style. Love that guy! One might argue that […]

Geofencing for the Web

navigator.serviceWorker.register(‘serviceworker.js’).then( function(serviceWorkerRegistration) { serviceWorkerRegistration.geofencing.add( new CircularGeofenceRegion({ name: “myfence”, latitude: 37.421999, longitude: -122.084015, radius: 1000 }), {includePosition: true}).then( function(geofence) { console.log(geofence.id); // If more than just a name needs to be stored with a geofence, now // would be the time to store this in some storage. }, function(error) { // During development it often helps […]