Progressive Web Apps

Determining Service Worker Support for your Site

Dean Hume

• 3 min read

Have you ever thought about building a Progressive Web App or even adding a service worker to your website? Perhaps you’ve considered it, but weren’t too sure about whether or not your users were on browsers that supported these features. Would they even benefit from their features? Speaking from experience, I know how challenging it can be to convince key stakeholders about trying out new technology on your product.

Without a doubt, one of the best ways to go about this is to start tracking usage and check the results. It's much easier to convince someone about a great piece of tech, if you are able to show the benefit to the users.

In this article, I am going to run through a small snippet of code that you can use to track service worker support on your site. We'll be pushing the results through to Google Analytics, but this could be tailored to suit any Web analytics package.

Tracking Service Worker Support

On this very blog, I am using Google Analytics as a web analytics tool. It allows me to easily see useful information about how my site is performing and lets me track page views. It also has the ability to track certain events, which works perfectly for this use case.

I won’t go into too much detail about how to set up Google Analytics on your site, as the online documentation does a great job of this. However, let's take a look at an empty HTML page with the basic Google Analytics code in place.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Tracking Service Worker Support</title>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxx-1"></script>
<script>

     
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

    
  gtag('config', 'UA-xxx-1');
</script>
  </head>
  <body>
  
  </body>
</html>

According to the documentation, the code above is typical setup for Google Analytics. In order for us to start using this, we need to add a check to determine service worker support and push it through to Google Analytics.

I added the following code to each page just after the closing body tag.

<script>
function getServiceWorkerSupport() {
  if ('serviceWorker' in navigator) {
    return 'supported';
  } else {
    return 'unsupported';
  }
}


// Push the result to Google Analytics
gtag('event', 'service-worker-support', {
      'event_category' : 'service-worker-support',
      'event_label' : getServiceWorkerSupport()
    })
</script>

Let’s break this down. I've created a function called getServiceWorkerSupport() which uses feature detection to determine if the current browser is capable of using service workers.

For each visit to my site, this information will get pushed through to Google Analytics. For this blog, I wanted to take things a little further and determine exactly how many pages were actually controlled by an active service worker. For example, if someone visits a site with a service worker on it, it will get installed the first time and only used the next time they reload the page or navigate away. I wanted to determine how many people were both supported and using my service worker.

With this in mind, I updated the function above to include the condition below.

function getServiceWorkerSupport() {
  if ('serviceWorker' in navigator) {
    return navigator.serviceWorker.controller ? 'controlled' : 'supported';
  } else {
    return 'unsupported';
  }
}

After a few days of tracking data, I logged into the Google Analytics dashboard and checked the numbers. Start by expanding the menu and navigate to Behavior -> Events -> Top Events and you should see something a little similar to the image below.

Service Worker Support - Google Analytics

From there, choose the Event label as the primary dimension and show as a chart. I’ve tried to outline the image below (in red) to give you a better idea of this in action.

Service Worker Support

In the image above, the blue (83.8%) represents all visits to the site that support service workers. The green (10.5%) represents of all visits to my site were controlled by a service worker and served cached data. Finally, the orange shows that around 3% of all visits to my site were from browsers that don’t support service workers.

That is a big portion of my users that not only have browser support for service workers, but also already benefit from the service worker on my site!

Summary

It's worth mentioning that a big portion of my users are tech savvy and interested in learning about new browser technology. Depending on your target audience, you might find that your numbers are completely different.

If you find that the majority of your users would benefit from converting your site to a Progressive Web App, or even a service worker, it might be worth considering it. Who knows…. you might even find that service workers are good for the environment!