ADDING SERVICE WORKERS TO YOUR SITE

HIRZA PIMENTEL ▪ 03/21/2018

---

In this post, I'm going to discuss how I added service workers to this website. I worked on this to apply what I've learned as part of the the Grow with Google Challenge Scholarship. I implemented the strategy suggested by adactio.com to cache [1] the home page with its linked stylesheets, images, and scripts; [2] and the offline page, which would include an error about not having network connection and a link to the home page.

WHY USE SERVICE WORKERS?

To give you an idea of what a service worker is or does, let me give you a couple of scenarios. Let's pretend you needed some water and asked me for some. I got up, connected a hose to the faucet, and handed the other end of the hose to you. Now, let's say you asked for some water again. This time, I got a glass, filled it with water from the faucet, and gave the glass to you. In the first scenario, if I turn the faucet off, you won't get to drink any more water. In the second scenario, if I turn the faucet off, you still have your glass, and you can still drink water from it.

The first scenario, is similar to viewing a website from the browser. Each time you load a page, you need to connect to the internet. If the connection is "turned off", then you won't be able to see anything (just like when you can't get water from the hose if the faucet is turned off). The second scenario is like having a service worker. When you view a website that has a service worker, the service worker acts like the glass and holds the website for you. That way, the next time you need to view the website, if the faucet (internet connection) is turned off, you can still see what the website looked like the last time you viewed it (just like how you can drink the water that's left in your glass).

I created this website using HTML, CSS and Javascript. I used a simple file structure, where the HTML pages are in the root directory; and I had a public folder, which holds my scripts, stylesheets, and images folder. I added the ServiceWorker.js in the root directory. This means that the service worker's scope will be the entire origin, and the service worker will be able to intercept network calls for everything on this domain. I created the serviceworkerController.js file under the public/scripts/ folder. We use this script for registering the Service Worker and handling updates when a new version is available. I added a call to the serviceworkerController.js in my html files. This ensures that the Service Worker is registered when users load the website. Note that Service Workers require a secure connection, and you need to implement HTTPS for service worker to function correctly.

One issue I ran into while testing this website, which is deployed on Netlify is that if I have Bundle CSS and Bundle JS selected under Assets Optimization, the linked stylesheets and scripts were not working. The home page and offline page were being displayed when offline, but they were not styled correctly. A workaround for this is to use the absolute cloudfront location ('https://d33wubrfki0l68.cloudfront.net...') of the stylesheets and scripts instead of the relative path when adding the resources to the cache if you have those options on.