Progressive Web Applications | What Are They?

Progressive Web Applications are web apps that utilise emerging modern APIs to deliver a native app-like user experience to web apps.

In other words, they are web apps that look and feel similar to a native mobile app.

The modern APIs that PWAs are built with grant the web apps the unique features of native apps, all from a single codebase.

What Makes A Web Application Progressive?

One can't tell if a web app is progressive at first sight. It could be considered progressive if it implements a set of given features, or meets certain requirements which include:

1. Works offline
2. Is installable
3. Easy to synchronise
4. Send push notifications

Another way of determining if a web app is progressive is by passing it's URL to LightHouse, an open-source, automated tool for improving the quality of web pages. It then audits the URL, runs a series of audits and generates a score based on how well the page performed. If the web app is progressive, it ends up with a high score.

This is only a rough indicator

PWA Criterions?

When a PWA is being designed, three core principles are usually being followed:

a. Capability

From its definition, PWAs are built with emerging modern APIs, with Web Assembly included. As a result, it grants web apps more capabilities, similar to that of native apps. Examples of such capabilities are file system access, media controls, full clipboard support and app badging.

These capabilities are built with the web's secure, user-centric permission model, thereby ensuring that visiting a PWA isn't a scary adventure.

b. Reliability

A PWA has to feel fast and dependable, regardless of the network, in other words, it should be network independent.

Nowadays, performance is highly critical. A research carried out early 2018 by Google, showed that the probability of a mobile site's visitor bouncing due to long page load time increases by 123%. The performance also affects your entire experience, from how users perceive your application, to how it performs.

PWAs need to be usable and highly interactive regardless of the network connection, be it slow or flaky

c. Installable

PWAs when installed, run in a standalone window instead of a browser's tab. They can be launched from the user's home screen, taskbar, or shelf. They can also be searched on the device. These features make them feel like part of the device.

When a PWA moves out of a tab and into a standalone app window, it transforms how users think about it and interacts with it

Examples of PWAs

• Twitter
• Instagram
• Spotify
• Uber
• Pinterest

Conclusion

At their core, PWAs are web apps. By utilising progressive enhancement, new capabilities are enabled, making them more reliable and installable. Even if new capabilities aren't available, users would still get the core experience

They help developers deliver a unique web experience their users would love. They allow what you build to be installed by anyone, anywhere, any device, all with a single codebase.