Do you need Service Worker in your web app?

Published at: 10/09/2016


People discussing modern javascript frameworks here and there, absolutely not paying enough attention to the technologies, which have direct and major impact on their customers’ experience.

One of this technologies is Service Workers.

What is Service Worker?

I’ll use a definition which is given on Mozilla Developer Network page:

A service worker is an event-driven worker registered against an origin and a path. It takes the form of a JavaScript file that can control the web page/site it is associated with, intercepting and modifying navigation and resource requests, and caching resources in a very granular fashion to give you complete control over how your app behaves in certain situations (the most obvious one being when the network is not available.)

Sounds a bit cryptic, isn’t it? There’s another definition right above which makes everything clear right away:

Service workers essentially act as proxy servers that sit between web applications, and the browser and network (when available). They are intended to (amongst other things) enable the creation of effective offline experiences, intercepting network requests and taking appropriate action based on whether the network is available and updated assets reside on the server. They will also allow access to push notifications and background sync APIs.

That’s it! Now everything’s much more clear, Service Worker is something which allows us to:

  • create a proxy layer between our browser and web server
  • send push notifications
  • do some background tasks (mostly, preloading/refreshing various stuff user might require or just perform update of already displayed stuff)

Last two things are possible because Service Worker is not operating in the context of the page. So it can be active even if website’s page is closed.

There’re some limitations:

  • Not all of the browsers support Service Worker, it’s only supported by modern versions of Firefox, Chrome and Opera, while Microsoft Edge and Safari are currently only planning to introduce support in the nearest future
  • Service Worker requires HTTPS connection — as it operates as a proxy, you’re for sure don’t want to have this proxy being installed by man-in-the-middle
  • You cannot manipulate DOM from Service Worker, it’s not designed for that (remember that Service Worker is not operating in the context of the page). Although, you can use postMessage to communicate with page directly

Use cases for Service Worker

Based on features Service Workers provide, you can use them for:

Service Workers are a key technology in implementing Progressive Web Apps.

Real world usage of Service Workers

Do the features Service Workers bring beneficial for customers? Here’re examples of some adopters (they all mentioned in Case Studies section on Google Developer portal):

Some learnings from these case studies:

  • In majority of cases, Web Push Notifications increased re-engagement of users
  • Offline-optimized experience allows customers to still review their order and still finish it even if connection became unusable or disappeared at all (by providing a number call and allowing to access a cart to reassure missing articles from session)
  • In nearly all of the case studies, performance contribution mentioned as a driver, although there’s no concrete numbers

So do I need to use Service Worker for my web app?

Taking in account everything mentioned above, you probably should give Service Workers a try, they’re a huge benefit for your customers and the process of introducing them to your project will surprise you (it is easy and straightforward).

Another big question is whether you should use them for desktop web apps. You might be assuming that desktop connection is always guaranteed to be good and fast.

Apparently, it’s not true. You might be providing desktop web app experience for tablet users and… bam! 42% of your customers might be using tablets. And yes, they will have the same connection downsides as mobile phones. Also, according to Shipment forecast of laptops, desktop PCs and tablets worldwide from 2010 to 2019 (in million units), desktops are the minority of newly shipped units, this effectively reduces the probability of having speedy wired connection. Laptop users might be using public low-quality WiFi or the same connection as mobile phone.

So, optimizing for low/no connectivity still matters.

Huge media websites are already providing notifications for desktop users as well as mobile users to effectively re-engage their visitors.

Do you want to lose these customers and opportunities?

Service Workers are the future.

Useful articles on Service Workers

I really enjoyed reading these articles about creating Progressive Web Apps and Service Worker in general:

Progressive Web Apps with React.js by Addy Osmani, Staff Engineer at Google:

And some more:

Copyright © 2020 Valerii Iatsko