Back to Posts

Service Workers

Posted in Tools, Web-Development, Google-Developers

What is a service worker?

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. Today, they already include features like push notifications and background sync. In the future, service workers will support other things like periodic sync or geofencing. The core feature discussed in this tutorial is the ability to intercept and handle network requests, including programmatically managing a cache of responses. The reason this is such an exciting API is that it allows you to support offline experiences, giving developers complete control over the experience.

Below is an overly simplified version of the service worker lifecycle on its first installation:

Service Worker Lifecycle

My website homepage now has a service worker. A snackbar notification will indicate whether or not the site caching was successfully achieved. Normally, service workers don’t work on webpages that are not served over https so the secure homepage site is an advantage. Caching usually takes around 5-10 seconds to finish depending on the speed of your connection. Once done, turn off your internet connection and check whether the site still loads. Below is a sample of working and properly loaded portfolio content:

Sample Service Worker Lifecycle

You may also have the option to save it on your phone home screen like a native app. Yes, it works! Service workers will be added to all webpages, soon.

Read more about service workers on the Google Developers page.

Hi! My name is Marc and I'm a student developer from Cagayan de Oro, Philippines, and building interfaces and developing Machine Learning and AI applications for various causes are some of my skills as an up-and-coming developer. I'm also occasionally invited to speak at tech conferences to share my knowledge and experiences as a budding front end web developer-turned-data scientist.

Read Next

What are Status Pages?