Progressive Web Applications

Progressive Web Applications or PWAs are web apps which are developed using a number of technologies that allow them to take advantage of both web and native app features. PWA’s UI is similar to that of a native app. If we want to develop an app we have to use different technologies for different platforms like Java for Android and Swift for IOS etc. whereas a PWA is basically a website so it can be developed using regular web technologies and since it runs on an internet browser therefore PWAs offer cross-platform experience.

Fun fact: The term “Progressive Web App” isn’t a formal or official name. It’s just a shorthand used initially by Google for the concept of creating a flexible, adaptable app using only web technologies.

Combining all the good parts

PWAs combine the features of both web and native apps. For example, it’s a lot faster and easier to visit a website than to install an application, web apps are more discoverable than native apps and you can share web apps by simply sharing a link. However, native apps offer more smooth experience for the user as they are better integrated with the operating system. Native apps can be installed for offline usage and it’s faster to just tap an icon and launch the app rather than navigating to it on a browser.

PWAs allows us to build web apps which have all these advantages and more without losing any of the features that make the web great. This is not a brand new concept; ideas like these have been revisited many times on the web platform. Progressive Enhancement and responsive design already allows us to build mobile-friendly websites.

What an app needs to be called a PWA?

As mentioned above, PWAs are created with multiple technologies. They represent a new ideology for building web apps which involve certain patterns, APIs and other features. It is not obvious from the first look whether a web app is a PWA or not. An app is considered a PWA when it meets certain requirements or has a certain set of features.

There are also some tools available which can determine how complete (as a percentage) a web app is, such as Google Lighthouse. A higher lighthouse score indicates that a web app is more complete. However, this is only a rough indicator.

To be identified as a PWA, there are some key principles that a web app should observe:

• Discoverable: the contents can be found through search engines
• Installable: it should be available on device’s home screen or the app launcher
• Linkable: it can be easily shared by simply sending a URL
• Network Independent: it should work offline or with a poor connection
• Progressive: it should be usable on a basic level on older browsers, but fully-functional on the latest ones
• Re-engageable: it should be able to send notifications whenever there’s new content available
• Responsive: it should be usable on any device with a screen and a browser — mobile phones, tablets, laptops, TVs, refrigerators etc
• Safe: the connections between the user, the app, and your server should be secured against any third parties trying to get access to sensitive data

Advantages of PWA

There are huge benefits for relatively small amount of efforts required to implement the core PWA features.

• Decrease in loading time after the installation of the app due to caching with service workers, along with saving bandwidth and time. PWAs have near-instantaneous loading time (from the second visit).
• PWAs have the ability to update only the content that has changed when an app update is available whereas native apps can force the users to download the entire application again even if there’s only a slight modification in the app.
• PWAs have the look and feel of a native app, they run in full-screen mode and can have icons on the home screen or app launcher.
• They are able to engage with the users by sending push-notifications and messages.

Success Stories

It is no secret that performance is vital to the success and profitability of any online venture. And therefore, websites across industries are utilizing PWAs to improve their performance. Some good examples of PWA include — Trivago, Pinterest, Tinder etc.

Flipkart Lite is a great example of a PWA. It is India’s largest e-commerce site and was rebuilt as a progressive web app in 2015, which resulted in 70% increase in conversions. The AliExpress PWA has also seen much better results than either the web or the native app, with a phenomenal increase of 104% in conversion rates for new users. Given their profit increase, and the relatively low amount of work required for the conversion of these apps to PWAs, the advantage is clear.