Make your app work offline with Service Workers

Page 1 of 2:

Page 1: Faster loading

Service Workers can be used to improve loading times and offline support for your sites and web apps. In this tutorial we're going to show you how to progressively enhance a web app with a Service Worker. First we'll cover what is a Service Worker and how its lifecycle works, then we'll show you how to use then to speed up your site (this page) and offer offline content (page 2).

Then we'll show you how to how to build an app with Service Workers. You'll learn how to set up a bare-bones Worker that will cache and serve static assets (delivering a huge performance boost on subsequent loads), then how to cache dynamic API responses and give our demo app full offline support. First, let's look at what exactly Service Workers are, and how they function.

If a Worker is already installed, the new Service Worker will be installed and then sit at the waiting step until the page is fully closed and then reloaded. Simply refreshing is not enough because you might have other tabs open. You need to ensure all instances of the page are closed otherwise the new Worker won't activate. You don't have to close the tabs, you can just navigate away to another site and return.

    window.API_KEY = 'paste-your-key-here';

    npm install

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

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

   <script>
     if ('serviceWorker' in navigator) {
       navigator.serviceWorker.register('/sw.js')
         .then(function(reg) {
           if (reg.installing) {
             console.log('SW installing');
           } else if (reg.waiting) {
             console.log('SW waiting');
           } else if (reg.active) {
             console.log('SW activated');
           }
         }).catch(function(error) {
           // registration failed
           console.log('Registration failed with ' + error);
         });
     }
   </script>

Start your development server by running npm start and open the page in a modern browser. We'd recommend using Google Chrome as it has good service-worker support in its DevTools, which we'll be referring to throughout this tutorial. You should see three things logged to your Console; two from the Service Worker for the install and activate events, and the other will be the message from the registration.

 self.skipWaiting();

Time to add another listener. This time we'll track the fetch event that is fired every time the page loads a resource, such as a CSS file, image or even API response. We'll open a cache, return the request response to the page and then – in the background – cache the response. First off let's add the listener and refresh so you can see what happens. In the console you should see many FetchEvent logs.

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

self.addEventListener('fetch', (event) => {
 // Ignore crossdomain requests
 if (!event.request.url.startsWith(self.location.origin)) {
   return;
 }
 // Ignore non-GET requests
 if (event.request.method !== 'GET') {
   return;
 }
 // Ignore browser-sync
 if (event.request.url.indexOf('browser-sync') > -1) {
   return;
 }
 // Prevent index route being cached
 if (event.request.url === (self.location.origin + '/')) {
   return;
 }
 // Prevent index.html being cached
 if (event.request.url.endsWith('index.html')) {
   return;
 }
 console.log(event);
});

const assetsCacheName = 'v1-assets';

  // Tell the fetch to respond with this Promise chain
 event.respondWith(
   // Open the cache
   caches.open(assetsCacheName)
     .then((cache) => {
       // Make the request to the network
       return fetch(event.request)
         .then((response) => {
           // Cache the response
           cache.put(event.request, response.clone());
           // Return the original response to the page
           return response;
         });
     })
 );

 // Tell the fetch to respond with this chain
 event.respondWith(
   // Open the cache
   caches.open(assetsCacheName)
     .then((cache) => {
       // Look for matching request in the cache
       return cache.match(event.request)
         .then((matched) => {
           // If a match is found return the cached version first
           if (matched) {
             return matched;
           }
           // Otherwise continue to the network
           return fetch(event.request)
             .then((response) => {
               // Cache the response
               cache.put(event.request, response.clone());
               // Return the original response to the page
               return response;
             });
         });
     })
);

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Current page: Page 1: Faster loading

Next Page Page 2: Adding offline access

Daniel Crisp is a contract/freelance senior frontend developer. Daniel's areas of expertise lie in JavaScript (Angular), HTML and CSS.

Make your app work offline with Service Workers

What is a Service Worker?

The Service Worker lifecycle

01. Clone the demo app

02. Get your API key

03. Start the development server

04. Introduce your Service Worker

05. Activate the Worker

06. Confirm changes

07. Track the fetch event

08. Cache the assets

09. Serve from the cache

Related articles