Service Worker Magic with Workbox & Preact
Service Workers are an amazing new browser advancement that are key to creating Progressive Web Apps
Workbox is an super tool to help you craft a Service Worker
Preact is a fantastic slimline React based framework that is an excellent choice for building a PWA due to it’s lightweight footprint and out of the box PWA support
The easiest way to get started with Preact is to use the preact-cli. You don’t need to use this but it comes with a lot of well thought out opinionated decisions that make your life easier.
Go ahead and install preact-cli globally:
npm i -g preact-cli
Once installed use the following command to scaffold our app:
preact create default preact-sw-magic
The preact-cli will creates a PWA for you out of the box, it comes fully loaded with:
- Automatic code splitting for routes
- An auto generated Service Worker using sw-precache
- PRPL pattern to load up the app quickly
- Pre-rendering / server-side rendering hydration
To see your app complete with service worker run the following command:
cd preact-sw-magic && npm run serve
You should now be able to access your PWA on https://localhost:8080. You can verify the Service Worker is installed by cracking open Chrome Developer Tools and selecting the Application tab, then the Service Worker tab.
If you then shift to the Cache tab, you’ll see your entire app has been cached for offline use, nice!
This is all fantastic and if all you want to do is pre-cache your App then sticking with the SW-Precache provided for you out of the box by Preact is a fine choice.
If your PWA needs are a little more ambitious though, for example, you want to add push notifications or background sync to your service worker then you’ll need to shift over to workbox.
Workbox that Preact
The preact-cli automagically generated your service worker as part of the build process. To get control over that service worker we’ll need to first disable that preact-cli magic.
Turn off Preact CLI service worker generation
In package.json modify the default scripts for build & serve as follows:
"build": "preact build --no-service-worker
"serve": "preact build --no-service-worker && preact serve"
This tells Preact not to generate a service worker.
Install workbox webpack module
We’ll be using the latest workbox 3.0 which is in beta:
npm install --save-dev email@example.com
In the root of your project create a preact.config.js file and configure the workbox webpack plugin as follows:
This tells webpack to use workbox injectManifest which will allow us to use our own service worker combined with workbox.
To make this work we’ll need to create the
service-worker.js file in the root of the project. We’ll just get things back to where they were and set up pre-caching in service-worker.js as follows:
workbox.precaching.precacheAndRoute(self.__precacheManifest || );
Install service worker using Preact template html
The index.html just like the service worker is automagically generated for you by the preact-cli. In our case we need a bit more control over that file in order to tell it to use our custom service worker file. Thankfully we can add another flag to the preact-cli to use a custom template.html.
Back in package.json we’ll further extend our build scripts as follows:
Create a template.html
The default index.html for Preact can be found in the Github repo. Create a file named template.html in the
src directory and copy in the contents from the repo. At the end add another script tag with the following:
Custom Service Worker
Once again run:
npm run serve
If you go back into Chrome developer tools and access the service worker section you should be able to verify that your service worker is now
service-worker.js instead of
If you open the
service-worker.js file you should see something similar to:
Note that pre-caching is in place pointing to a manifest file which webpack generated listing all the files that are to be cached. You’ll also see we are using Workbox in the service worker.
Everything is now set up for you to add to
service-worker.js and customise your service worker as needed. I’d recommend starting by looking at the Workbox common recipes but there is plenty more you can do:
The code for this tutorial can be found on Github at https://github.com/applification/workbox-preact
My name is Dave Hudson, I’m a product building UX pedant who leads development teams & writes code.
I consult under Applification Ltd and I’m available for all things React, agile and product development!