Why Progressive Web App ?

PWA (Progressive Web Apps) is one of the most talked about technology shifts in the web and has gained unparalleled momentum among the practitioners in the IT world. If you are building for the web, I’m sure that PWA is the latest ‘buzzword’ that has been added to your work vocabulary.

What is a Progressive Web App (PWA)?

Progressive Web App (PWA) is a term used to denote a new software development methodology. Unlike traditional applications, progressive web apps are a hybrid of regular web pages and a mobile application. This new application model attempts to combine features offered by most modern browsers with the benefits of mobile experience

It is a set of best practices to make a web application function similar to a desktop or mobile application. The dream is to have an experience so uniform and seamless that the user is unable to tell the difference between a Progressive Web App and a native mobile app.

Why do we need a Progressive Web App?Before we understand why we need a progressive web app, let’s talk about some of the challenges we are facing today with native and web apps.

Slow website load: Do you know how long a user waits to click the “Close X” button if a website is too slow? Three seconds! 53% of users abandon a website if it is too slow.

High friction: People don’t want to install native apps. An average user installs 0 applications in a month.

User engagement: Users spend most of their time in native apps, but mobile web reach is almost three times that of native apps. Hence, most of the users are not actively engaged. However, users are spending 80% of their time on only their top three native apps.

PWAs help solve these problems. There are multiple reasons for using a progressive web app, but here are some of the top capabilities it provides:

Progressive: By definition, a progressive web app must work on any device and enhance progressively, taking advantage of any features available on the user’s device and browser.

1. Discoverable: Because a progressive web app is a website, it should be discoverable in search engines. This is a major advantage over native applications, which still lag behind websites in searchability.
2. Linkable: As another characteristic inherited from websites, a well-designed website should use the URI to indicate the current state of the application. This will enable the web app to retain or reload its state when the user bookmarks or shares the app’s URL.
3. Responsive: A progressive web app’s UI must fit the device’s form factor and screen size.
4. App-like: A progressive web app should look like a native app and be built on the application shell model, with minimal page refreshes.
5. Connectivity-independent: It should work in areas of low connectivity or offline (our favorite characteristic).
6. Re-engageable: Mobile app users are more likely to reuse their apps, and progressive web apps are intended to achieve the same goals through features such as push notifications.
7. Installable: A progressive web app can be installed on the device’s home screen, making it readily available.
8. Fresh: When new content is published and the user is connected to the Internet, that content should be made available in the app.
9. Safe: Because a progressive web app has a more intimate user experience and because all network requests can be intercepted through service workers, it is imperative that the app be hosted over HTTPS to prevent man-in-the-middle attacks.

Service Workers

One of the more exciting aspects of progressive web apps is that they can work offline. Using service workers, it is possible to show data that was retrieved in previous sessions of the app (using IndexedDB) or, alternatively, to show the application shell and inform the user that they are not connected to the Internet (the approach we’ve taken in this demo). Once the user reconnects, we can then retrieve the latest data from the server.

All of this is possible through service workers, which are event-driven scripts (written in JavaScript) that have access to domain-wide events, including network fetches. With them, we can cache all static resources, which could drastically reduce network requests and improve performance considerably, too.

Application Shell

The application shell is the minimum HTML, CSS and JavaScript required to power a user interface. A native mobile application includes the application shell as part of its distributable, whereas websites ordinarily request this over the network. Progressive web applications bridge this gap by placing the application shell’s resources and assets in the browser’s cache.

Conclusion

We can’t say that PWA will kill Native Apps in the future. But still there is a growing interest for this approach in the community. PWAs are still in their infancy with a lot of challenges to be addressed. Yet, they have the potential to create a shift in the way the web works.