DEV Community: Nishant Contractor

Everything you want to know about Service Worker

Nishant Contractor — Fri, 28 Feb 2020 10:51:57 +0000

This blog is all about service worker, how its work, where we can use it, how we can remove that, where it will not work and many more. Will start with the introduction.

Service Worker

Service worker is java script file that runs in user’s browser as background process.

How service worker works

It intercept network requests, caching or retrieving resources from the cache, and delivering push messages.Service workers can be accessed by many tabs in the browser at the same time because only one service worker can Exists per scope and existence is independent from the main thread.

To install Service worker in your project, first you need to register service worker

Register service worker

To register service worker first we need to check if browser supports it or not? using “navigator Object”.navigator Object contains information about the browser.

Your first service worker downloads when you call register() function.

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('/ServiceWorker.js')
   .then(function(response) {
      // Service worker registration done
       console.log('Registration Successful', response);
   }, function(error) {
       // Service worker registration failed
       console.log('Registration Failed', error);
})
}

The service worker can only access folders below it, so it is probably best to keep it in the root of the project (the top most folder).
Register function on service worker downloads the service worker script from provided URL and executes it.

In above code response contains information about the state of the service worker as well as it’s scope.

In ServiceWorker.js file we can write code for installation,update, push etc.

If service worker fails to register, the register promise rejects, and the service worker is discarded.

How to add service worker

After Successfully registration of service worker, installation can executes:

Install Service Worker:

If service worker is the new or updated, the installation process will start.At this stage you can cached you static content or file.
This event only trigger if “ServiceWorker.js” doesn’t exists or file is newer version(updated).

self.addEventListener('install', cach => {
 event.waitUntil(
     caches.open('v1').then(cache => {
         return cache.addAll([
           '/favicon.ico',
         ]);
       })
     );
 });

Service Worker not installed if any file failed to catched which is provide in cache.addAll() function.
By using event.waitUntil() service worker not terminate until the promise passed to waitUntil() method is either resolved or rejected.

After successful installation Activation event trigger of service worker

 self.addEventListener('activate', event => {
   console.log('v1 now ready to handle fetches');
 })

How to clear service worker cache

In activation event we can remove or delete existed cached item using cache.delete() method.

For Remove Clear Catch

self.addEventListener('activate', function(event) {
 event.waitUntil(
   caches.keys().then(function(cacheNames) {
     cacheNames.forEach(function(cacheName) {
       caches.delete(cacheName);
     });
   });
 )
}

caches.keys() method provide names od all caches accessible to you.

Everytime user makes request for page, service workers fetch event fires.
In this event we decide whether we want that request to go to the network or present catch items.

self.addEventListener('fetch', event => {
   const url = new URL(event.request.url);
   //serve the image from catch if the request is same origin
   if(url.origin === location.origin) {
    //image which is stored at the time of installation
    //respond with cached 
       event.respondWith(caches.match('/favicon.ico'));
   } 
})

Give respond with netweork call

self.addEventListener('fetch', event => {
     event.respondWith(fetch(event.request));
 })

respondWith() method allows you to promise for a Response yourself.

Update Service Worker

If we make changes in the service worker’s script file then the browser is considered as a new service worker and it’s installed event fire.

When we update service worker, new service worker not control clients because
Old service workers handle client’s. When we close browser the old service will be killed and new one takes place of old service worker.

If we want to use a new service worker as soon as installation is completed we can use the self.skipWaiting() method.
This method activates service workers as it’s finished installing.

If a new service worker fails to install, the old one continues to handle clients(pages).

In development mode Check the checkbox update on reload which is update service worker on page refresh.

Debugging Service Worker

Service workers are only available to "secure origins" (HTTPS sites, basically).

To Inspect service worker from chrome
Goto to developer tool(F12) or right click on page click on inspect tab
Go to application tab and then click on service worker from sidebar
In Sidebar you have list of register service Worker.

How to test service worker on localhost

For developing purposes You can use localhost because localhost is also considered as “secure origins”. Or setup a local server by using npm http-server and serve package.

Unregister Service Worker/ Remove service worker / Disable service worker

For unregister service worker

if ('serviceWorker' in navigator) {
     navigator.serviceWorker.getRegistration().then(
       function(registrations) {
         for(let registration of registrations) {
           registration.unregister();
         }
       }
     )
 }

The service worker may not die immediately. If the worker is currently performing any tasks for a client it will complete before being officially removed.It will only be removed after page reload or closed.

Because of this you can make dummy new service workers and use it in place of currently working service workers.
By Placing unregister() method of service worker in activation event of service worker and force each client’s browser to reload the page.

How To manually unregistered service worker from chrome

Goto to developer tool(F12) or right click on page click on inspect tab
Go to application tab and then click on service worker from sidebar
In service worker you have list of registered service worker
From that you can manually unregister service worker by clicking on the unregister link.

Most frequently asked questions in PWA

Nishant Contractor — Thu, 06 Feb 2020 12:04:47 +0000

I am writing this blog to share my findings on a question that I had during the developments of PWA. I went through many blogs and tutorials for this and I found few things are not working with IOS while Android has good support for PWA.

Let's see them one by one.

Can PWA access camera?

Yes, both the OS gives access to the camera, which allows image and video capturing in PWA.
Android: YES
IOS: YES

Can PWA work offline?

PWA leverages data caching during your last interactions with the app, and by doing that it works offline while there is no internet connection.
Android: YES
IOS: YES

Can PWA access the file system?

is the only way you can access a regular storage file system, which will not have any event listener. PWA can't listen to regular file system changes except for the files of APP.

Can PWA access the Bluetooth?

The web Bluetooth API is a low-level API allowing web applications to pair with the nearby Bluetooth Low Energy-enabled peripheral devices and access their services exposed. But it's not supported on all platforms.
Android: YES
IOS: NO

Can PWA access the phone’s GPS?

A lot of browsers support this recent feature and these include Chrome, Edge, Firefox, Safari, and Opera. In IE, you’ll have to battle a few configurations to make it work
Android: YES
IOS: YES

Can PWA use advanced camera functionality?

Advanced camera functionality is not available on all platforms. For example QR CODE scanning.

Android: YES
IOS: NO

Can PWA access contacts?

No there is no way to access contacts in PWA, it is mainly restricted for security purposes.
Android: NO
IOS: NO

Can PWA check for new updates?

Yes, in order to achieve this you have to check your cached files are changed or not. We can implement this by writing a hook in onupdatefound function on the registered Service Worker.

Here I found a detailed blog for this that explained each step in detail.
https://medium.com/progressive-web-apps/pwa-create-a-new-update-available-notification-using-service-workers-18be9168d717

Can PWA have Push Notifications?

This is the most crucial part of any applications and many product owners avoid PWA just because of these limitations. Android support push notifications but IOS does not support. Maybe Apple can update in the next version 14. But we have to wait till that.
Android: YES
IOS: NO

QR Code integration in PWA and its challenges

Nishant Contractor — Thu, 30 Jan 2020 09:45:41 +0000

We were developing a PWA app that needs us to scan QR codes if user in order to validate them. Now we knew how to integrate QR scanner in javascript but it was our first time PWA and we were clueless how we would achieve that in PWA.

Our Need?

We needed to implement QR code scanner functionality to confirm that users met with each other. Where one user shows QR code in their app and the other user needs to scan that QR code from the app.

     To implement this we needed two things
          QR CODE Generator (Which encode data)
          QR CODE Scanner (Which decode data)

     We went through the multiple libraries and amongst them, we used the following libraries.
          angularx-qrcode to generate QR Code.
          ngx-scanner to scan generated QR Code.

NOTE: Many times the scanner library does not scan QRs of all libraries. So you need to select a library accordingly.

Where we got stuck?

Once we got the requirement we decided to make POC for that. We followed the steps given in the library documentation and created a nice demo where we generate QR code with required encrypted data which was decode by the integrated QR scanner. We tested this after adding an app to the home screen and it worked.

Unfortunately we tested this in Android device and not in an IOS device. We knew IOS PWA supports camera features but were unaware that it does not support streaming in camera. Hence the QR scanning did not work in IOS PWA.

We had committed to deliver this feature to our client as we had tested the POC

Our workaround.

We were able to catch and handle errors generated while the user tried to scan QR code in and IOS device. So we decided to handle this by checking QR supportiveness of the devices before the user reached that screen. If the user is on an unsupported device we would not show the user scan button, instead of that we show the user an OTP screen that they can ask to other users. The OTP screen for other users has a toggle switch between the QR code and the OTP screen to manage the flow accordingly.

How should you start?

     1) First understand the requirements clearly. Make small POC or demo before committing anything in PWA as there are too many things that are still not supported in IOS devices.
     2) Find out a workaround that fulfils the system requirement without bothering users.
     3) Select libraries whose community is more active and supports the latest version of the technologies being used.

Challenges with IOS PWA

Nishant Contractor — Fri, 24 Jan 2020 12:21:05 +0000

We are writing this blog after spending two thousand hours in PWA development. All PWA brings different challenges and we are sharing our experience here. We have faced a lot of issues while developing PWA applications for our clients from which many issues we had to resolve with other alternative approaches.

PWA has the ability to work on multiple platforms with the behavior of native app. This blog is more about PWA with the IOS platform as Apple is still lagging compared to other platforms. We will be sharing the challenges we faced while developing a dating app.

How we started the development of PWA for a dating application?

Our native mobile application team created a flawless dating app with all the required features which a dating app needed. All the development was done and it went through all the phases of testing. The client was very happy with the performance and end result of the app. And it became a sad day for him when Apple’s review team rejected the application due to nontechnical reasons. The client was confident about the concept and anyhow wanted to take the application to the market. Hence, we started the development of the same app as PWA.

Challenge 1: Social Login

Social Login is the first step in the dating app where we integrated Google login. Our PWA could not work with Google plugin as its open google login screen in the new browser tab and its redirect user on redirect URL in the same browser tab and not in the PWA.

To fix this issue we wrote our own code where we create a child window in PWA and open google’s login screen inside it. Once a user is authorized we took that data from google and closed the child window.

Challenge 2: QR Scanning

Our application has two user types of male and female and before they start the date, both users need to verify their presence at the decided place. And for that, we decided to use QR code where one user needs to scan other user’s code to confirm both users meet each other at the decided place. The camera feature is available in IOS PWA but unfortunately, the camera stream is not supported.

As an alternative we have implemented OTP based functionality. First we check whether the device supported camera stream or not? If it's allowed then we render the QR scanner and if the camera stream is not allowed in the device we render the OTP screen.

Challenge 3: Location (GPS)

In a dating app user location is the most important feature to show the nearest match. PWA has access to location service on devices and for that it will ask user permission. Everything works well if the PWA is allowed to access location service, issues will happen when the PWA is not allowed to use that service and as there is no other way to ask again to the user for location service access we got stuck.

To overcome this issue we have integrated third party API which give user location based on IP address. So first our PWA asks the user to allow permission for location service if the user allows then we read the user’s geolocation details from the device and if the user denied the permission then we use the 3rd party API to get the user’s geolocation.

Challenge 4: Push notification
Push notification is a very important functionality for any app. We need to use push notification to support chat functionality and it was also used to inform other users on each and every status change of their date like date requested, date accepted, date rejected etc.

Push notification is not working with IOS PWA as IOS is not supporting background processing.
So first we track the user device information in our system and we have implemented triggers for push notification that send notifications to android users and for IOS users we have written SMS triggers.

Other things
Few other normally overseen things that needs to be considered while developing a PWA that supports IOS devices.
IOS allows only 50 MB to PWA, so it's very important to plan app caching logic accordingly.
Background sync is also not allowed in IOS for PWAs, which a major drawback for any application.
Apple removed unused items (files) from disk if the PWA app is not used more than 15days(approx).

Summary

For Progressive Web Apps on iOS, there are certain limitations, but they aren't deal-breakers. Many of the features most requested have some form of a fallback solution, at least. It may not provide the native Web platform API or service offerings with comparable user experience.

For most mobile apps, particularly on iOS, there isn't a good channel for promoting and engaging your clients. For most applications, app installs are rare. The creation, management and promotion are also very costly for these applications.

Specifically, the web progressive web apps, are available on every device in every browser. And they can be sold through online channels, PPC and traditional marketing funnels at an affordable price.

Many brands, especially on iOS, have reported improved customer engagement stats after upgrading their websites to a PWA. Your brand will probably do so too