React PWA with Workbox

This page summarizes the projects mentioned and recommended in the original post on

Our great sponsors
  • OPS - Build and Run Open Source Unikernels
  • SonarLint - Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
  • Scout APM - Less time debugging, more time building
  • react-workbox-tutorial

    a brief tutorial covering the basics of using create-react-app with Workbox, including: updating service worker and refresh, caching GET requests, and background sync.

    git clone

  • ServiceWorkerUpdateListener

    The ServiceWorkerUpdateListener interface extends the Service Worker API by providing a convenient way to receive update events when ServiceWorkerRegistration acquires new service workers.

    To start, it might be worth your while to study this post. You can continue without it but it's probably where I learned the most about this stuff. Buried in the comments someone posted this bit of JavaScript, which does for us everything we need. We're going to use a barely-modified version of Mark's ServiceWorkerUpdateListener.js:

  • OPS

    OPS - Build and Run Open Source Unikernels. Quickly and easily build and deploy open source unikernels in tens of seconds. Deploy in any language to any cloud.

  • supabase

    The open source Firebase alternative. Follow to stay updated about our public Beta.

    We're making simple app that lets you add numbers to an array. Since we're going to cache and sync database calls we'll need a database. I've chosen Supabase because it's free and easy and a good alternative to Firebase.

  • workbox

    📦 Workbox: JavaScript libraries for Progressive Web Apps

    There are many approaches to handling requests with a service worker but the easiest way is Google's Workbox and the easiest way to get Workbox into a React app is to just use the PWA template that create-react-app provides. I was able to make an existing React app into a PWA simply by copying /src into a freshly spun CRA PWA-template but you can also get your bundle into Workbox other ways. It's just trickier.

  • lighthouse

    Automated auditing, performance metrics, and best practices for the web.

    Chrome has a handy tool called Lighthouse baked right into DevTools. So navigate to http://localhost:5000 in Chrome using an incognito tab, open up DevTools, and find the Lighthouse tab. Click on 'Generate report', wait several seconds, and voila!

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts