Rich offline web pages are one of the great feature of service worker. Imagine, you are travelling and going through a website page. Suddenly internet connection fails and when you go to that webpage again, you will see connection error message.

Service worker allows a rich offline experience. It intercepts the page’s network requests and provides local version of cached page if the client is offline. It means that if a page is cached previously, it will be available to the user who has no internet connection.

What is a service worker?

It is a web worker, written in javascript file which the browser runs in the background. It is a part of Progressive Web Apps. It has features like push notification, page caching or offline pages and background sync.

Prerequisites

HTTPS or localhost

You can use service worker in development through localhost but you need HTTPS in your site to run in the live version.

Browser support

Service workers are supported by Chrome, Firefox and Opera.

Getting started

Registering the service worker

The first thing to do is to tell the browser that your website has a service worker and you want to register it.

You can put the following script in your webpage at bottom before </body> tag.

<script>
// if the technology is supported by browser
if('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/serviceworker.js');
}
</script>

 

Service worker scope

The location of serviceworker.js file is very important. It will only operate on its current and child paths. If your service worker url is in root like example.com/serviceworker.js, then it will work on the entire site. But if its path is like example.com/sub-directory/serviceworker.js, then it will work from sub-directory and its child paths but it will not work on the root i.e.example.com. So be careful while placing your serviceworker.js file.

After registering, browser will activate the service worker. There are some events which are fired in its lifecycle.

Install event is fired only once which installs the service worker.

self.addEventListener('install', event => {
  // ...
});

 

Activate event is fired once which is used to activate the worker and delete the old cache files.

self.addEventListener('activate', event => {
  // ...
});

 

Fetch event intercepts the HTTP requests which is fired on each request and returns the files and assets.

self.addEventListener('fetch', event => {
  // ...
});

 

Now let’s create serviceworker.js.

'use strict';

var cacheVersion = 1;
var currentCache = {
   offline: 'offline-cache' + cacheVersion
};

// Page you want to cache
const offlinePage = ‘my-page.html';

this.addEventListener('install', event => {
   event.waitUntil(
      caches.open(currentCache.offline).then(function(cache) {
         return cache.addAll([offlinePage]);
      })
   );
});

// Now to retrieve the cached pages, we will use the fetch event.
this.addEventListener('fetch', event => {
   if(event.request.mode === 'navigate' || (event.request.method === 'GET')) {
      event.respondWith(
         fetch(event.request.url).catch(error => {
            // Return the offline page
            return caches.match(offlinePage);
         })
      );
   }
   else{
      event.respondWith(
         caches.match(event.request).then(function (response) {
            return response || fetch(event.request);
         })
      );
   }
});

 

The fetch event will listen all the requests and will return the cached page if you are offline. And that's it. Your service worker is ready and functioning.

You can test the service worker in Chrome’s Developer Tools. First visit your page then Go to the Network tab in Developer tools and click on offline throttling and then refresh the page again. If everything went good, you will see your page running in offline.