Friday, September 25, 2020

PWA Progressive web application

 Nowadays web application development is not border by only web development. Today owner wants it to also work on device like mobile, tablet etc irrespective of its O/S andriod, Window or IOS.

In past, we used to speak and treat Web and mobile development in different ways i.e. we say andriod developers for device run on andriod, IOS developer for the device on MAC O/S same for windows. We use to treat Web development different from them.

Then come the age of responsive behaviour which with the help of new CSS tag like Media Query and now we can use the same code of web development to behave differently in terms of look and feel.

Then we move one more step above responsive i.e. we introduce PWA means we develope the site in web techonologies with belwo given benefits.

1- Our site work on offline mode. Yes I mean it OFFLINE mode without internet.
2- We do the cache of the data from the User UI Screen. i.e. we store the data that is inserted by the user UI or page that is shown to the user in cache.
3- We can do the Push mechanism from the server to the client when they come online.
4- We can do the sync process periodically or server defined on the user come online.
5- Highly low in size
6- Only need to know HTMLS5, CSS, JAVASCRIPT technologies.
7- Support all the latest browser that support HTML5 safari, chrome, firfox, opera etc. But not supported by IE.
8- No big size software installation on the device. you can store the browser url as an desktop icon and then reopen it as if it is like application installed. So no lose of storage.
9- Even the owner don't need to write and maintained different code for different device.
10-Google Chrome comes with excellent application in F12 or Developer tool that gives you in details about the PWA application options. Along with Lighthoues to test how your application is behaving as PWA.

Now lets try to understand little bit in terms of topology how its work

Device UI --> Service Worker JAVASCRIPT --> Cache --> Server

In general Service Worker JAVASCRIPT set in between the USer Device browser and internet. All the data that goes from the User Browser goes to internet goes from service worker. So where ever internet is not present this service worker js will store the data in cache.

And when ever the internet come online it service worker js will take the data from cache and send it to the server using internet.

Additional it gives notification and sync benefits to the user.

In next article we will show you how to creat a smile PWA application.

No comments: