Image

progressive-web-apps-vue-3

4 min read
Last update: December 19, 2021

Service Workers

When it comes to working with progressive web apps, you won’t get very far before you hear about this thing called a “service worker.” So what are they?

What are service workers?

Service workers might sound complicated, but at the end of the day, they’re simply scripts that your browser can run in the background. And as a result, it allows us as developers to support really rich, offline experiences, which is really exciting when it comes to progressive web apps.

How do they work with Vue CLI?

So how do we handle service workers inside of the Vue CLI? If we open up this file here: registerServiceWorker.js. You’ll see here that Vue CLI, true to its ethos, is trying to simplify things by providing a boilerplate script on how we register service workers.

/* eslint-disable no-console */

import { register } from 'register-service-worker'

/* Rest of the code omitted for brevity */

So as you can see here, there’s an import register function from register-service-worker, which is a library to assist with service worker registrations. And then when it’s production, we’ll go ahead and build out that service worker.

Inside we can define things inside of these various lifecycle hooks.

/* Sample Service Worker Lifecycle Hooks */

if (process.env.NODE_ENV === 'production') {
register(`service-worker.js`, {
ready () {
// When the service worker is ready...
},
registered () {
// When the service has been regisered
},
cached () {
// When the content has been cached for offline use
},
updatefound () {
// When new content has been found and is being downloaded
},
updated () {
// When new content is available and a refresh is needed
},
offline () {
// When the app goes into offline mode
},
error (error) {
// When the app encounters an error during registration
}
})
}

For example, like what happens when it’s ready? When it’s been registered, we have cached, updatefound, updated, offline, and even error state. We don’t need to change anything at this time, but in case you need to come in here and make modifications, now you know where to look. Let’s go ahead and see what the service worker looks like when we actually ship it to users. I’ll open up my console and I’ll run yarn build.

We see that we now have this newly created dist folder, which contains the distributed artifacts that we’ll be sending to users. Inside of here, you’ll see that there’s a lot of boilerplate that’s already been defined as far as importing scripts and ensuring that the correct things are being brought in. But then there’s also this thing called Workbox here. And so I want to cover this real quick because Workbox is actually quite essential when it comes to working with progressive web apps.

What is Workbox?

So what is Workbox? Like a lot of the libraries in JavaScript work box is a set of libraries that’s designed to abstract the way, best practices, as well as boiler plate that developers frequently find themselves writing when working with service workers.

So as a result, you’ll find that a lot of developers use Workbox in order to customize how the service workers are actually being used. Don’t worry though. We don’t need to learn this right now in order to work with PWAs. I just want you to know that this is available to you if you need it.

So what do you need to configure?

Even though service workers can be rather tricky when you dive into the deep end of it, for getting started with progressive web apps, the Vue CLI does so much work for you that, believe it or not, you don’t need to make any additional configurations at this time. 🤯 All you gotta do is make sure that your file has your registerServiceWorker.js and Vue CLI will take care of it from there.

Next Steps

In the next lesson, we’re going to cover another core concept when it comes to progressive web apps, and that is the manifest.json. See you in the next lesson.