Introduction to Service worker

Service Workers  are like a JavaScript files , but they have access to set of features and also it’s run on a separate thread. It will not share the thread where the normal JavaScript code loaded by your html pages runs on. When you register a service worker through your  html page or code initially , it will manage all the pages of a given scope. For example if your service worker is attached to the root of your application , then it’s applicable to all the html pages not only the single html page.

Service worker is also live on even after you closed all the pages in the browser .For example if you are using a mobile phone, even if you close the application , service worker will run as a background process.

What we can do with service workers?

Since it’s background process ,service workers can react all kind of incoming events from your JavaScript code as well as from your server as web push notification and can do something based on that , for example you can return a cached asset , show some notifications to the user and so on.

Type of events which service workers can listen to

fetch

By using fetch API you can initiate an http request asynchronously to get some resources across the network. This new API is similar to XmlHttpRequest , but  provides a more powerful and flexible feature set

fetch('https://httpbin.org/get')
.then(function(response) {
return response.json();
})

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

 

What you can do with this fetch API in service worker?

By using service worker every http request send via fetch API can intercept like a network proxy.So you can block the request if you want and also you can manipulate the request.

self.addEventListener('fetch', function (event) {

event.respondWith(fetch(event.request));

});

Also  the image tags which point to some image resource in the html will also send a fetch request by the browser. So you can cache the same by intercepting it.

Push Notifications

Every browser like Google Chrome,Mozilla Firefox has its own web push  server , So you can push notifications from your web server to this web push server and then browser will send this notifications to your client. This feature is very useful for a mobile to receive push notifications even if we are not in the application.

https://developers.google.com/web/fundamentals/codelabs/push-notifications/

How to Register a service worker?

Please note one thing  , the scope of the service worker depends on the location of the file. If the file is  on your root of the application , service workers are applies to all pages in your application. If you can create the file in sub folder , service worker could only control the pages inside of this folder.

  • Create a new file , you can give any name you want . Here I gave sw.js
  • Add your service worker registration code , you can add this in to your start up js file.
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
   .then(function () {
       console.log('Service worker registered!');
    })
   .catch(function(err) {
      console.log(err);
    });
}

That’s it .

Introduction to Progressive Web Apps

PWA is not a technology or a framework , set of features in web which helps to improve your application progressively. It means if you have a modern browser you will get an awesome user experience else those features just not support it , your application will have existing features remains as it is.

Let’s talk about what all the features we can use to enhance our existing or new web application .

1. You can bring native look and feel of mobile device apps on your web pages. It’s not the responsiveness of web page but you can access the native features such as camera , accessing geo location, push notifications.
2. Offline Capability when your internet connection get lost.
3. Background Synchronization of data
4. Icon on the home screen , you don’t need to install the application from the app store to place it on your home screen.

There are three import things I want to summarize about the progressive web application.

Reliable : Application will load instantly even in a uncertain condition and provide offline functionality through caching.
https://developers.google.com/web/progressive-web-apps/#reliable
Fast : Respond quickly as possible based on the user interactions.
https://developers.google.com/web/progressive-web-apps/#fast

Engaging : Feels like a native app on mobile devices.
https://developers.google.com/web/progressive-web-apps/#engaging