One file that will change the web — what, how, and why?

Published in

Lunar Works Lab

4 min readAug 9, 2018

In my last article ‘Progressive Web Apps — An application for applications’ I introduced the idea that we can take some core methodologies, strategies, and technologies from Progressive Web Apps (PWA) to improve the way we think about and build websites.

I realise that I focused a lot on some of the methodologies and strategies, but didn’t go into too much detail regarding the technology that can bring the power of a PWA to life. So, for this article I’d like to explore the core technology behind a PWA a little more, hopefully explaining in a way that is easily understandable for non-developers and developers alike.

Modern websites and web apps rely on a number of technologies to work, and companies will prioritise such technologies in different ways for a number of reasons. There is however one small piece of technology that all should be aware of, and thinking hard about.

Meet The Service Worker

Progressive Web Apps have brought a number of ideas to the table when it comes to developing web apps, and more generally websites. In order to build a Progressive Web App, you must employ a service worker.

Don’t worry, this doesn’t require contacting HR and going on a recruitment drive.

What Is A Service Worker?

A service worker is simply a small file that is saved on a users device when they visit a Progressive Web App, or a website that uses the Progressive Web App technology.

Once saved, it will live there forever, remaining as a constant point of connection between a server and the device it is installed on. A service worker is a script, meaning it can be called upon to run when required.

Let’s consider a very quick and simple example. You visit a new messaging website ‘Chatr’ (which is actually a web app — a Progressive Web App) to talk with your friends online for free (think WhatsApp but as a website). You register and send messages to a few friends, then leave the website, close your browser, and go back to your day. Meanwhile, in the background, a service worker is saved to your device. One of your friends sends you a message back, how do you know? Easy, you received a push notification. What?! Yes, you received a push notification from a website, and yes, this happened whilst the website and browser was closed.

When your friend sent you a message, the server sent a message to the service worker saved on your device (the constant point of connection), which told you about the new message via a push notification.

They are effectively next generation cookies, but for good not evil; you could even say a service worker is a very ‘clever cookie’.

Google’s more formal description is as follows:

“Rich offline experiences, periodic background syncs, push notifications — functionality that would normally require a native application — are coming to the web. Service workers provide the technical foundation that all these features rely on.”

Why Do They Exist?

As per Google’s description above, the point of a service worker is to support the next generation of web experiences (PWSs), and the associated features.

The end goal is to deliver faster, more reliable, and more engaging web content to users. This should be achieved no matter what a users connection or device.

A service worker is the technology that drives all this, it is the file that delivers the means to the end.

What Do They Do?

The power of a service worker is not limited to sending push notifications. By themselves, services workers can offer the following enhancements to a web app or website:

Significantly improve performance — load times, increased engagement, and improved conversions
Make a web app or website work offline — just like a native app

Both of these are achieved through caching strategies.

They can also be used to leverage the more advanced features of Progressive Web Apps such as:

Push notifications
Background sync
Mobile payments

Given that a service worker doesn’t add a huge amount of overhead, the performance advantages alone are enough of a reason to look at integrating one into a web app or website. Luckily, we know how to build a progressive web app.

Case Studies

There a more and more examples of the benefits of service workers and PWAs appearing all the time as the technology gains traction. At Lunar Works, we have implemented PWA technology into our own website using a service worker. Our first visit load time is around 2–3 seconds, whereas our second visit load time is around 0.8 seconds. Also, once you’ve visited and browsed a page it will then work completely offline.

Take a look at these case studies for more on how services workers and PWAs are delivering more performant and engaging content:

Next Steps

If you’re interested in finding out more about service workers and Progressive Web Apps, either for the purposes of an app, website, or just to learn more, then feel free to get in touch at liam@lunarworks.co.uk.