SN Blog

Boost performance with service workers

☕ 5 min read 154

Boost performance with service workers

What is service worker

    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.

 

Register a service worker

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

if('serviceWorker'in navigator){
window.addEventListener('load',()=>{
navigator.serviceWorker.register('/service-worker.js')
.then(reg=>console.log("Serviceworkerregistered"))
.catch(err=>console.error(`ServiceWorkerError:${err}`));
});
}else{
console.log("ServiceWorkerisnotsupportedbybrowser.");
}

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:

const cacheName='v1';
const cachedAssets=['script.js','index.html'];
self.addEventListener("install",(e)=>{
e.waitUntil(
caches
.open(cacheName)
.then((cache)=>cache.addAll(cachedAssets))
.then(()=>self.skipWaiting())
);
});

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.

self.addEventListener('activate',(e)=>{
e.waitUntil(
caches.keys().then(cacheNames=>{
return Promise.all(
cacheNames.map(cache=>{
if(cache!==cacheName){
return caches.delete(cache);
}
})
);
})
);
});

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.

self.addEventListener('fetch',(e)=>{
e.respondWith(fetch(e.request)
.catch(()=>caches.match(e.request))
);
});

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.

How much data can we store

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.

navigator.storageQuota.queryInfo("temporary")
.then(function(info){
console.log(info.quota);
});

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

  • Firefox after 50MB of data stored
  • Safari mobile can use only 50MB max
  • Safari desktop does not have storage limits, but starts requesting for confirms after 5MB stored.

 

Measuring performance

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.

 

Conclusion

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.

0 Comments

Add a comment