Progressive Web Applications

Part
01
of one
Part
01

Progressive Web Apps (PWAs)

Overview

HTML5 provided a feature called Application Cache. This feature allowed websites to store significant amounts of data offline and hence it paved the way for the development of web functionalities which were similar to the native application.

Progressive Web Apps are web applications that provide app-like functionality to customers and can be installed on the user’s device. The pioneering work in this field started in 2015 by Google, when it brought the concept of combining the best qualities of the web with native apps.

Below is our research to understand PWAs, its structure, differences from mobile websites and native app, and its limitations. Then we have also suggested some of the best PWAs available.

What does a PWA consist of?

The two building blocks of PWA are web app manifest files and a service worker.

The web app manifest file is used to install the web application to the home screen of the device by providing information such as name, author, icons, and description.

A service worker is a JavaScript file which runs in the background of the browsers and performs various functions which include:

i) Recognizing network status and in case of no internet availability, display a special page.

ii) Adding application data to the browser cache of the device when it is online and using that data when the device is offline.

iii) Enabling push notifications when the website is not open.
Currently, Chrome, Firefox, and Opera browsers provide adequate support for service workers. As of now, Safari has limited support for the service workers.

What is the difference between a PWA and a mobile website?

Broadly a PWA and mobile website have the following differences:

i) PWAs can add an icon on the device home screen while the same is not possible for a mobile website.

ii) PWAs can appear in the apps list using WebAPKs. Hence, they can be searched easily on the device home screen.

iii) PWAs open in full-screen.

iv) PWAs can access user-downloaded files in any browser (Chrome and Opera)

v) The user interface of a PWA is smooth and super fast as it uses HTML5 functionalities such as HTML5 Canvas or WebGL.

What is the difference between a PWA and a native app?

Apart from the development cost, which is significantly less for PWA, these are the differences between a PWA and a native app:

i) PWA provides universal compatibility and is operating system agnostic. While a different native app is required for a different platform like Android, Appstore, and Windows

ii) Unlike a native app, a PWA does not require installation prior to usage. Also, it is simple to provide updates in a PWA, and hence it is easier to keep all the users up to date.

iii) PWA also provides unified customer experience as customers, access same version of the app.

iv) The accessibility and user engagement in case of PWA is extremely high compared to a native app.

v) The few cases in points are PWAs of Aliexpress and Washington Post, which have seen improved rates of engagement with the customers.

What are the limitations of a PWA?

Every technology has its limitations. Besides, limited support for PWA by iOS, these are the limitations which a PWA has:

i) Unlike native apps, PWA cannot access, telephony features. So, PWA cannot access SMSs, or call records.

ii) It cannot access user’s phone numbers, voice mail, and it cannot make phone calls without the Dialer dialog.

iii) It cannot access contacts, alarms, calendar, and task management.

iv) It does not have integration with mobile hardware features like a flashlight, atmospheric pressure sensor. Although features like Bluetooth, NFC, light sensor, etc. are supported by PWAs

v) It cannot modify system settings and logs.

vi) Currently, iOS Safari provides limited support for PWAs.

Do PWAs function consistently on iOS and Android devices?

iOS doesn’t support the full features of PWAs whereas Android fully supports all the PWA features. The major difference in functionalities is due to the fact that Apple keeps the caches for “few weeks”, while other browsers like Chrome, Opera, and Firefox keeps the caches which can always be used by PWAs.

What are the best examples of existing PWAs?

Some of the best examples of PWAs are:
Alibaba
Lancome

An example that deals with walking a user through a process

A step by step explanation for developing a PWA can be found here. It covers technical details with examples and relevant links to open sources and hence can be a good start to developing your PWA.

Conclusion

HTML5 functionalities have opened up the possibilities of providing an app like functionalities on the web while overcoming limitations like device storage, platform-specific etc. Progressive Web Apps significantly reduces development costs and provides multiple benefits compared to a mobile website or native app. The research above covers all the pros and cons of PWA in brief.

Sources
Sources