I’m trying to make a Progressive Web App! Part 3.1: Install service worker

Let’s take a step back and really try to understand this service worker thing. You can do a lot of things with a service worker, more things that I won’t even pretend that I know.

In this case, I want to use a service worker for saving assets to the cache. When the user visits the site next time, the service worker should then intercept the requests and serve the assets from the cache instead. That’s a lot faster than downloading them over the network.

Register the service worker

Let’s go over the steps, line by line, that will make this happen. These are our files:

index.html
app.js
style.css
service-worker.js

For the sake of simplicity, let’s register our service worker at the bottom of index.html

if (‘serviceWorker’ in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('./service-worker.js');
  })
}

If the browser has support for service workers, it will register our service-worker.js file when the load event on window is fired.

Install the service worker

Well that was easy, right? Now let’s switch over to service-worker.js and add the following code:

var cache_name = 'my-website';
var filesToCache = [
  '/',
  '/app.js',
  '/style.css'
];
var precache = function() {
  return caches.open(cache_name).then(function (cache) {
    return cache.addAll(filesToCache);
  });
}
self.addEventListener('install', function(event) {
  event.waitUntill(precache());
)};

Okey, breath in and breath out. Don’t panic, let’s go over this line by line.

cache_name is just the name of our little storage in the cache that the browser gives us.

The filesToCache array is just what it sounds like. We wanna store index.html app.js and style.css in the cache. When the user visits the site the next time, these assets will be served immediately.

Next, when the install event is fired, our little storage in the cache will be created: caches.open(cache_name)

Then, a Promise containing our cache storage is returned. We’ll add our files to that storage: cache.addAll(filesToCache)

Developer tools

We can verify that everything worked as expected by opening up our developer tools. Click on Service Workers in the sidebar on the Application tab (in Google Chrome.)

We can see here that our service worker is activated and is running. If we then click on Cache Storage in the sidebar, we’ll see our my-website cache containing three files.

Please remember that you do need to close the tab and visit 127.0.0.1:8887 again in order to cache the files. It won’t happen if you only reload the tab.

The next step…

Our service worker has now instructed the browser to save our files in its cache. But this doesn’t mean that the user will be served these files on the next visit. Not yet at least, that’s what I’ll dive into in the next part!