Technologies behind Progressive Web App
Initially people thought Web Apps can never compete with the native apps for reliability, speed and user engagement. But few technologies let you offer few key features customers want from native apps. We call these Progressive Web Apps — A hybrid of web app and native app. They give users the kind of reliable,fast and engaging experience that they have come to expect from the native apps but delivered through webs.
In this blog, I am going to teach you the fundamentals of Progressive Web Apps and how to kick start with PWA in your own site. They are reliable and load quickly even when slow internet,intermittent networks or when there is no internet at all.
To get an idea about Progressive Web App you can have a look at : https://shailaja93.github.io/Progressive-Web-Apps/
There are two essential pieces of technology that enable the progressive web app to be reliable, fast and engaging — Service Worker and Web App Manifest File.
Service Worker :
Service Worker is a client side proxy written in JavaScript that is run by your browser in the background separate from your web page and handles events fired by the browser or your web page. Since it runs in the background it doesn’t need the web page to be open. One of the electrifying feature is to handle the fetch event — Intercepting and responding to network requests. This puts the service worker virtually between the browser and the network. Allowing the service worker to provide the content even when off-line and syncing back to the server when a connection is available.
Service Worker has a different life cycle which is completely separate from the web page. In order to use the service worker it has to be registered by your app. If the page never had before service worker or the service worker has been updated the browser gets the service worker and installs it.Hence after being installed it then gets activated. The service worker then controls the pages under the scope (Don’t worry if you are not aware with the scope will cover later). Once the service worker is in control it will handle fetch,message/push events. Note that the browser terminates the service worker to save memory and it will be restarted as needed.
Web App Manifest File :
Web Manifest File gives the ability to control how your app appears to the user and more significantly how the app is launched.When a set of heuristics are met the web app prompts the user to add your app to the home screen. Then when the user opens up the home screen it opens up the full screen app with no browser UI. Thus it feels like any other native app.
To kick start with Progressive Web App you can go through my blogs :
1) Register service worker and cache the resources in our app on the initial load.
2) Update the old service worker and cache the new response in Cache Storage.
3) Get out the resources from the cache and intercept the network requests.
4) Make our web app installable via the Web App Manifest File.
SoluteLabs is a high-performance team of 25 focused on mobile and web design and development; we have produced top #10 chart topping applications on Android and iOS app stores, graphics that have gone viral and applications with Millions of downloads.
