Need of Progressive Web App ?

What is Progressive Web App / PWA?

Progressive web app or PWA is a way, in which we provide various features like push notification, background sync, home screen button to our users for better web experience or can say App-like experience with the web. The Progressive Web Application is lightning fast in compared to the normal website of our application.

Why do we need to use this?

At this time of Web + Mobile era where users are mostly dependent on their devices and even on Mobile (80% of internet users own a smartphone) very much, we can not ignore any kind of platforms. If we are losing focus on any platform then surely we are going to lose aginst our competitor. Regardless this there can be various other things which can be the reason of less traffic to our website. Like if our website has large css, js files, too many images, various font families (which we don’t want to need but we have to add them) or users have a low internet connection (it’s not their fault because in last Boss and Customers are always right

) etc. Whatever the reason, it’s going to haunt us in terms of revenue. As a user of any website in terms of these cases then surely these will be my point of view –

As a Customer point of view

Customer/ Users are the souls of any website if they aren’t there, we are already dead or if not then we will be soon. 53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, they expect them to be fast, no janky scrolling or slow to respond interfaces. So we can think, how much the expectations of customers increases with our competitors as well. It’s pretty simple, customers want fast response other things come later like if we are giving Iphone7 for 1$ but if the page is not opening then no one is going/able to buy it. If we aren’t filling all blanks at this time of tech era then we can’t earn 121bn yuan ($18 billion) in a single day.

As a Developer/ Owner point of view

As a developer, what is the most basic problem we faced? According to me, it’s the SPEED of our website, how fast are we serving customer requests? If web response is fast (I am talking about mostly front data like html/css or static data) then obviously customer going to stay longer else they are going to surf another site within minutes, it’s like smoking, we don’t know how much dangerous it’s now but in the last, we are dead so does our website.

So developer wants a way to speed up things and there are plenty of options to do it like caching our static content into the browser cache using setting parameters in the header from the server script or using another way but really is it the best way? What if, we want to update something just after the previous update? Do we really need to store all kind of data in the cache, like I normally used MySql for the database so obviously, I will prefer some kind of database if browser provides any? and can I store in it easily?

So if I told you that we can solve these things with PWA then how is it :). Before that let’s check, what is it actually or what is behind it?

What is it?

Like I wrote PWA is a way to get a mobile application like web experience but what’s behind of this big concept. It’s Service Worker (with silent happiness

). Actually, as a developer what problem I faced, mostly was that I was unable to hack request if any browser was sending it to the server or was missing the single point for it

here comes the Service Worker. Service worker is a kind of proxy server between the server and user browser. Everything will pass to it if someone is requesting and we can manipulate those requests and their response as well.

So Service worker provides us a way to do these things with few lines of javascript code.

/**
* Webkul Software.
*
* @category Webkul, Uvdesk
* @package Webkul_UVdesk_PWA
* @author Nikhil
* @copyright Copyright © 2010–2016 Webkul Software Private Limited (https://webkul.com)@license https://store.webkul.com/license.html
*/

// Few listener for service worker with registering service worker
if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘/sw.js’).then(function(reg) {
//your service worker code
})
 navigator.serviceWorker.addEventListener(‘controllerchange’, function() {
 });
 navigator.serviceWorker.addEventListener(‘statechange’,function(){ 

});
 //your other service worker code
}

What can we do with it (Service worker)?

With the help of Service Worker, we can do pretty much everything which we weren’t able to do, previously. With help of service worker, we can completely operate on browser like caching our content, storing data into IndexedDB and other operation as well.

We can provide Web manifest to the user for the application like experience. I am taking example of UVdesk here. In this image, we can see UVdesk icon on the mobile home page

With help of it, we can completely browse UVdesk like we are viewing it, in the application.

Homepage

Ticket list view

Plus, we can send Push notifications to the users, can serve them responses if user network isn’t working properly (using caching or other we added earlier).

Without the Internet but didn’t cache data yet

Without the Internet but serving data from Service Worker

We can provide notification to the user to update if we updated some content which is cached in the user browser.

What’s next?

Yes, of course, there is always something next, nothing is completed :D. In next one, we are going to see actually, how can we build? Thank you for your time.

Are there any examples of it?

Of course, without example, how are we going to learn ;) ? These are few links which I used in learning and at the time of writing.

Google Blog

Booking.com

MDN

and great one Jake Archibald