Welcome to Progressive Web App Series. If you have missed previous blog posts, please read from following links. In this blog post we will understand one of the important component of PWA, which is Service Worker, which is nothing JavaScript file that take cares of caching, showing push notifications in PWA
What is Service Worker?
Service Worker
I am sure most of the developers are aware of concept threading. A thread is a process that can run in background without affecting the main process. Service worker is just like a thread for your PWA. It runs separately and independently from main browser thread. That means it runs in background and will be alive in browser in case you have closed your web application.
In your PWA application, a service worker is a simple JavaScript file where we can first register it, install it and activate it. Once it’s activated it will stay there till we remove it.
A Network Proxy
It can work as network proxy as well. It can intercept network requests and if needed it will block it and give you data from cache or it can let the request proceed and get you fresh data.This also gives offline capability to application. In case there is no network, we can intercept request and load data from cache. It is mainly used for showing web push notifications in PWA as it runs in background so it can subscribe for push notification events and we can easily handle push notification with it. Caching resources will make content load faster under most network conditions.
Restrictions of Service Worker
Since it runs in background, it does not have access to localStorage. It also can not access DOM, to communicate with DOM it post the messages. It can only work on HTTPS.
How to register it in PWA?
You have to create a service-worker.js file and first of all register it in your app file.
navigator.serviceWorker
.register(‘./service-worker.js’)
.then(function(){
console.log(‘Service worker registered’);
})
.catch(function(error) {
console.log(‘Service worker registration failed, error:’, error);
});
Scope of it will be defined based on where you put the file in your web app. If you put it in root folder, it can control all the files and can intercept network requests from all the file.
Installation of Service Worker
Once it’s registered and it browser treat it as new service worker, it will try to install it, you can also listen for the install event by adding install event listener in your service worker.
self.addEventListener(‘install’, function(e) {
console.log(‘[ServiceWorker] Install’);
});
Activation
Once service worker is installed, it will be activated and now it is ready to intercept network requests and caching. We can also add event handler for it.
self.addEventListener(‘activate’, function(e) {
console.log(‘[ServiceWorker] Activate’);
});
You can learn more about it on Google Developer Website.
