There is a new concept of applications that is trending right now in the application industry. It is the concept of PWA – Progressive Web Application. May be you have not heard about it at all, or you may have read about it in many articles and trending topics in forums and still wondering how it works or what it exactly does, or maybe you have not heard at all about it.
Here in this article we will discuss in a simple way as to what PWA.
This article is the first from a set of articles we are writing on this topics, to really help people to understand the core features, the advanced ones and how it can help them in their business.
First of all, let us make ourselves clear that PWA is not a specific application. Also it is not only related to web applications the way it seems to look like at the first instance.
Think about PWA more like a concept and technology that could be used when building simple websites or complex web applications, which enhances them with some great features. Those features in return enhance the browsing experiences of the user on your website or web application to another level.
Now let’s discuss those features:
1- Offline availability
On a traditional website or web app, when a user is browsing and loads some pages, each page gets loaded individually from the internet. But the very moment a user is offline, he can’t access those pages anymore. The browser can help him to save some content in the browser cache, but as the browser cache capability is very limited (not reliable), a user cannot expect to access the entire content of all those visited pages when he is offline.
But, in a progressive web app, as a user browses a particular website and its different pages the pages the content is “progressively” saved in a memory by a special tool. This helps the user to access the website even offline. Hence the term “Progressive”. The special tool which is used to progressively save the content is called service worker, and it is more reliable on saving content than the browser cache. Hence progressive apps are termed reliable. This provides users a good browsing experience online and offline.
2- Fast loading
As page’s files and contents (any document, HTML, images, styles files…etc.) are saved by service worker which is reliable, the loading of the pages will be faster than a traditional website or web app that relies only on browser cache which is very limited. Apart from the reliability of service worker on saving content than browser cache, it could not only save content from visited pages but even the content on pages that are not already visited by the users, so that the time the users will open those pages they will load very quickly. This also allows the website or the web app to have a very quick response on users interactions and opens doors to very soft and smooth animations instead of janky scrolling.
Compared to the traditional website or web app, Progressive web apps are not only accessible through the browser, but they could be installed on a mobile phone like native mobile apps, not from the app store but directly from the browser. And they will be available in the user’s home screen with an icon like any other mobile app installed on the phone.
The user then need not open the browser again to open that PWA, but he will be able to launch it directly from the app’s icon available in his home’s screen. Have a look on the image to understand better.
Step 1: We launched the website of angular (https://angular.io) from the browser in a mobile phone. The Website is responsive so it shows well on mobile.
Step 2: As that website is also a PWA, an option to install it as an app is suggested and the bottom of the screen “Add Angular to Home Screen”
Step 3: A dialog asks the confirmation of the installation
Step 4: The PWA is installed and available from the user’s home screen as the others app.
Step 5: We launch the PWA from that home screen now, and it first shows a plash screen
Step 6 and Step 7: We got the PWA loaded and we can browse into it.
Here in this article we have briefly understood what a Progressive Web App is; and its features.
Plenty of websites including Twitter, Trivago, and Pinterest, have all seen positive results thanks to progressive web apps. PWAs are becoming increasingly popular among major browsers for both mobile and desktop. We will discuss more about the benefits of Progressive web apps in the next upcoming article.