nilsw.io
Front-end Development and Personal Endeavours

WG #1: Service Worker

– by Nils Wittler
This is the first post that could become a series: it is not really easy to stay on top of the webdev game today. New technologies and frameworks appear every minute. This is a try to give you at least a quick glimpse what the current topic is and what you can use it for. Today: Service Worker.

Expressed in a simple way a service worker is javascript code that can get executed when the client triggers a network request.

To make this clear I created a little illustration with my advanced illustration skills (!)

service worker illustration

The service worker "sits" between the client and the remote server and get's executed autonomous from your "main" Javascript source code.

So why/what for do I need that? The most important power a service worker gives you is the ability to cache ressources (that could be HTML, CSS, Javascript, Images, etc.). Especially on mobile devices the connection speed and quality is often very bad (see in the advanced illustration) so that you can serve ressources from the cache and thus dramatically increase the user experience.

So down the road a service worker gives you the possibility to:

  • make your website/web app become available offline -> aka the road towards a Progressive Web App
  • reduce the network load and thus have a faster initial page load

This leaves just one question open:

How to use it?

  1. Use HTTPS (localhost is fine for development)
  2. Register the service worker in your website/web app "main" Javascript source code
  3. Listen for events (install, fetch, etc) on the service worker
  4. Send ressources either from the cache or the network back to the client

So the basic implementation could look like this:

index.html

<script type="text/javascript">
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js').then(function(reg) {
        console.log('registration succeded');
    }, function(err) {
        console.log('registration failed');
    });
}
</script>

sw.js

this.addEventListener('install', function(event) {
    // fill the cache with data after initial install
});

this.addEventListener('fetch', function(event) {
    // serve content from cache or the network -> you decide
});

The final implementation of the caching logic is a bit more complex but gives you way more control than the AppCache (which in fact is deprecated anyway). Take a look at the Gist of Brandon Rozek and the great article of Lyza Danger Gardner "Making A Service Worker".

Wait! There is more...

Is it "just" caching? No!

A service worker allows you to implement for instance

as well.

When it comes to new web technologies there is always the question "implemented yet?"

Take a look at MDN and Caniuse. With the date of this article service workers are implemented in the newer versions of Chrome, Firefox and Opera with partial support for Chrome/Firefox for Android.

Go ahead and start using service workers today. All the users using the supporting browsers will be happy and for the rest the experience doesn't change at all.

Before you leave...

external bullhorn rocket send close menu github instagram twitter