Boost performance with service workers

Service workers are kind of workers that perform background tasks, on a separate processing thread. They allow the user to intercept network requests and conditionally store items in a special cache called CacheStorage API. The cache is different from the native browser cache, because it allows us to serve data from it when the user is offline. It can also improve the performance of the page.

This can be useful in various situations, for example if the user is in an area with poor WIFI connection. Service workers can help us deal with this problem by serving cached content that the user has already seen so they have something to look at, rather than nothing at all.

Start by creating a service-worker.js file, then you need to register it. You can do it in a <script> tag in the html or in a separate file.

The navigator is an object which has properties and methods about the application running the script. After that we go to service-worker.js file and place this chunk of code there:

We need to store the assets that we need to store in an array and add install event listener to the window object. Once the event is fired a new cache folder will be created with the cacheName and the assets from the array. After that we need to add activate event to the window in order to check if we have the latest cache version.

The most vital part is to load data from the cache storage. So we need to add this peace of code at the bottom of our service-worker.js file.

What we do here is add fetch listener on the window and when this event is fired, we try to access the assets by making network request using the fetch API. In case of being offline, the fetch API will not return the data and we can return the resources from the cache as a response to the original request. To control what happens when the user is offline, we need a mechanism that sits between us and the server and allow us to cache data for offline viewing.

The amount of data that can be stored is different depending on the browser and the device.

To verify the remaining space we can use the Quota Management API.

Some browsers starts prompting the users whether they agree in continuing storing further data when specific thresholds are reached.

When you retrieve assets from the service worker cache, you can achieve better performance than the browser cache. This means that you can further accelerate rendering performance for the user by lowering the amount of time it takes for the browser to begin painting the page. Numbers show that when service workers are used to enhance performance, you can see a 50% improvement over the browser’s caching behavior. That’s a sizeable decrease in rendering time! This doesn’t mean the browser cache is dead. You still need it, because it works so well and because you can fall back to it in browsers that don’t support service workers. Even in browsers that do support service workers, you can configure your fetch event code to ignore requests that you don’t want to intercept, at which point your requests will fall to the browser cache.

Service workers can boost dramatically the performance of the application when It comes to rendering. They can only be used over HTTPS, you can develop them on localhost without SSL certificate, but make sure you install it on production. Service workers can store content in a cache, store pages offline, display an offline page in case of poor internet connection. You can also develop Progressive Web Applications that are fast and user-friendly like mobile applications.

Related posts:

Imagine a life where every single decision you had to make became like venom infecting your mind with overcomplication. Now imagine a life where everything flowed freely, and you went about your day…

Prior to Apple deciding to add wireless charging for the new iPhone X, this form of charging hasn’t been in the news very much. Obviously, wireless charging does come with certain drawbacks, but it’s…