Workbox is a collection of JavaScript libraries that help you with service worker related functionalities when you’re building Progressive Web Apps.

In this article, I’m only going to focus on using workbox to generate the service worker file for your application.

W̵o̵r̵k̵b̵o̵x̵ ̵J̵S̵ ̵i̵s̵ ̵c̵u̵r̵r̵e̵n̵t̵l̵y̵ ̵i̵n̵ ̵A̵l̵p̵h̵a̵.̵ ̵I̵ ̵w̵i̵l̵l̵ ̵k̵e̵e̵p̵ ̵t̵h̵i̵s̵ ̵a̵r̵t̵i̵c̵l̵e̵ ̵u̵p̵ ̵t̵o̵ ̵d̵a̵t̵e̵ ̵a̵s̵ ̵W̵o̵r̵k̵b̵o̵x̵ ̵3̵ ̵r̵e̵a̵c̵h̵e̵s̵ ̵a̵ ̵s̵t̵a̵b̵l̵e̵ ̵r̵e̵l̵e̵a̵s̵e̵.̵

Workbox 3.0.0 was released on March 14 🎉

🤔 Why workbox?

I’ve previously used sw-precache & sw-toolbox when working with Progressive Web Apps. However, after hearing about it in the last Chrome Dev Summit and now that I’ve seen the Workbox 3, I’m so excited to switch as Workbox 3 focuses on delivering better modularity, powerful debugging support, all while keeping the library size small 😍.

💻 Follow along

The approach that I take when teaching new technologies is to go a bit low level while isolating concepts.

This is the same approach that Nicole Saidy and I take when presenting PWAworkshop.com at conferences & private companies. So that’s why the repository that I prepared has a build folder which simulates the result of a build tool.

We’re omitting the build step here to make sure you understand how workbox works.

So to follow along this tutorial, start by cloning this repository and installing its dependencies:

The only dependency that we’re installing is http-server which will let you serve your application in the browser.

This is the folder structure that we have at the moment:

.

├── build

│ ├── css

│ │ └── app.css

│ ├── index.html

│ └── js

│ └── app.js

└── package.json

🔗 Install workbox

Let’s start by installing the latest pre-release version of Workbox-cli

npm install workbox-cli --save-dev

Install workbox

I prefer installing libraries locally rather than globally in order to avoid unexpected problems when working on multiple projects.

So because we installed workbox locally, you can now invoke it by using npx

npx workbox (rather than just workbox ).

🎩 Workbox wizard

The first Workbox command that we’re going to go through is wizard .

workbox wizard scans your directory and asks you a series of questions in order to generate a workbox-config.js that will be used later on whenever you invoke workbox.

npx workbox wizard

and now workbox will ask you a series of questions.

Answer with yes to all the questions, since all the defaults make sense and you can simply edit the file later on if you need to.

Workbox wizard

You will now have a workbox-config.js at the root, containing the below configuration:

🏋️‍ Workbox generateSW

This workbox command will read your workbox-config.js and generate a service-worker file that pre-caches files based on the globPatterns that we got from workbox wizard: **/*.{css,html,js} .

npx workbox generateSW workbox-config.js

Workbox generateSW

Register the service worker

Now that the service worker file has been generated, we have to register it.

So let’s go into the index.html and add the following piece of code before the closing tag of the body:

Serve it

Now serve your app by running npm run serve and head to http://localhost:8080/ in your browser.

Voila! In the Network tab of Chrome dev tools, you can see the requests made by the service-worker which are prefixed by the ⚙️ icon. Workbox will only load the .dev.js helpers when you’re developing locally.