What Makes An App Progressive?

2019-07-04PWAs4 min read

Don't tell anyone, but PWAs aren't as shiny as most people imagine them to be. Service Workers have been around for a while and Let's Encrypt has been giving away free SSL certificates since 2014.

PWAs are apps built with guidelines for how the modern web should work. A PWA meets these requirements;

Accessibility from the ground up.

A core concept of PWAs is Progressive Enhancement; a way of building that provides the best experience possible with the user's device capabilities, network or physical abilities(more).

The alternate approach is Graceful Degradation which promotes building the best experiences possible with the best device or network while degrading to poorer experiences for users on less capable devices or network.

If the user's browser doesn't support Service Workers or other APIs that make PWAs work, the user should still achieve their goals while using the app. PWAs ideally start out as browser tabs without privileges, when the user permits, they progress to first-citizen apps.

Responsive and load instantly.

Estate on the user's device communicates reliability. Starting up instantly and interacting smoothly with the users irrespective of their network status.

All web apps should look great on every device, browser, and screen size. Beyond that is responsiveness to user interactions. Studies show that the longer it takes a system to respond to a users action, the less reliable the system is perceived. A user can be confused or frustrated if they click a button and it takes too long to respond.

PWAs are offline first.

Prior to PWAs, web developers never worried about offline. Things were so straightforward; an internet connection is a prerequisite for being on the internet. If a user doesn't have one, they're not our audience.

With PWAs, offline is a state to design for. A larger percentage of people visit the web from developing countries. Users in these regions spend most of their time offline and without wifi.

In the next billion-user regions, 1MB of data can cost as much as 10% of a user's monthly salaries(link). Users in these regions want to do things offline; their connectivity is not predictable, so they download pdf, videos, and other files to access them on demand.

Offline first apps are possible with the combination of Service Workers and the CacheAPI. When a user requests files from the servers, the browser can store most of the basic parts of the app. This way when a user visits without network connections, the browser can serve the saved files.

They earn the user's home screen.

The world would be a better place if things were progressive. It's the way relationships are formed; you meet a person for the first time, you shake hands. The second time, you get some hugs because you like them. The third time, it feels like you've known for ages. Your guards get loose after every meeting.

This is exactly how PWAs work. when you visit a PWA in Chrome, it doesn't immediately prompt you to add the app to your home screen. It makes sure you've visited the site a number of times in that week. Chrome wants to be sure if you visit the site very often. If it validates that, it'll ask you to add it to your home screen. This behavior is similar to what other browsers do.

Adding an app to the home screen is possible with the manifest file which holds information on how the app should behave when installed.

PWAs are engaging.

With the Push and Notification APIs, users can be re-engaged even when they're no longer on the site. These APIs are not yet available in a few browsers, but they're the single-game changers for the web as we know it.

This capability is also possible without adding the app to the home screen.

Instagram trying to show me notifications
Instagram trying to show me notifications

These and more are features that qualify an app as PWA. There's a lot the web can do with these capabilities once standardized in all browsers. Tomorrow, we'll see how well browsers support PWAs.

Thanks for reading😊.