Show Notifications when a Service Worker is Installed or Updated
Service Workers get installed and activated in the background, but until we reload the page they don’t take full control in the app. Showing a notification is a good way to let the user know that there is a new version of the app.
In this lesson I’ll show you how you can show a notification when a new service worker is installed and activated.
Instructor: [00:01] First, we need to access the registration variable that is available when the promise from the register method finishes. With it, we can not only register the service worker, but also have control over the service worker lifecycle.
[00:19] First, we need to check when there is an update on the service worker registration. We do that by using onUpdateFound. This will trigger when the new service worker is different to the previous one. At this point, the service worker will start to install. We can access it by typing const serviceWorker registration.installing.
[00:47] Now we have to listen to the state [inaudible] . We want to be notified when it goes from installing to installed. We can do that by using the serviceWorker.onStateChange. Here we have to check that the state is installed, state installed.
[01:13] Still here there could be two cases, the case when the service worker is first installed and the contents are cached, and the case where there was already a service worker, and it just gets updated with a new version. It all depends on if there is a controller on the service worker already.
[01:32] If there is in the navigator service worker control, if there is a controller, it's because there was a previous worker before. Here, we'll get a new version. If not, it's because this is the first service worker installed, so the contents are cached.
[01:57] In both cases, we want to show a message. For that, let's use the [inaudible] as a number component. Let's go to the app component, and here write v-snackbar, which will show a message. It will have some properties like absolute, through, so it doesn't depend on where in the tree it is.
[02:22] It needs to have a model to be shown or hide. Let's say show. We'll write a timeout variable, so after four seconds it hides automatically. We'll get this show a message from the properties of the component. Let's define show and message. I just realized I placed these out of the v app component. Now it's OK.
[02:55] Now let's go back to the main js file. Here, we'll pass the message property, message, and the show property, as well. We need to initialize them by typing data, message is an empty string, and show false. Finally, we can sense it from the outside by using the app variable.
[03:28] Down here, we could say app.show = true, and that's the same for here. App.message contents are now offline. Up here, we'll show a new version is available. Let's try this out now. First, I'm going to run npm run build and httpserver -c-1, so there is no caching happening.
[04:04] In the meanwhile, this is executing, I'm going to go to the app and, just to show it from the beginning, I'm going to unregister the service worker and delete the cache entry. Now that it's finished, if I reload, you'll see there is a "contents are now offline" message here.
[04:24] If we reload more times, nothing is happening, because there is no new version of the service worker, and the first one has already cached the contents. Now let's stop this from executing, and let's send something here. For example, I'm going to remove the "is." Let's run it again, and let's reload the app. Now you see a new version is available.