Progressive web apps: In-depth Overview

Editor's note: Progressiveness is becoming a new quality standard for web development. Below, ScienceSoft describes the characteristics of progressive web apps and lists the benefits they offer to businesses. In case you want to enjoy these benefits, reach out to our web app development team to discuss you PWA implementation project.

After years of its existence, the term ‘progressive web app’ is still a popular buzzword. To this day, many people find it difficult to draw a line between a website and a regular web app, so a new, peculiar type of web apps seems to be causing even more inconveniences.

Ironically, ‘inconvenience’ is exactly what progressive web apps are intended to address. Their entire concept focuses on making users’ web experience simpler, more satisfactory and reliable, regardless of the conditions.

Starbucks' 2x increase of active users and an even rate of desktop and mobile conversions. Uber's on 2G networks. Pinterest's 44% increase in user-generated ad revenue and 60% increase in engagement. All this success is thanks to progressive web apps.

 In case you’ve been longing to know more about the offer of progressive web apps (let’s also call them PWAs for short), this article is at your service.

What makes a web app ‘progressive’?

A PWA is still a web app, but with several enhancements that are listed below. These enhancements can be considered special defining attributes that distinguish a PWA from a common web app:

Service Workers

Service Workers do the job of proxy servers between an app, a browser and a network. They are responsible for caching PWA data on the first load and making an app available for offline use. In Chrome, specifically, Service Worker settings also allow pre-caching and cache management.

Since networks are now almost everywhere, and everyone’s always connected, it may seem unimportant whether an app can or can’t function offline. However, this feature isn’t simply about being available offline, but rather, about being able to perform well in any network conditions. Slow speed or low signal isn’t that uncommon, and properly designed PWAs with registered Service Workers ensure smooth navigation even under such circumstances.

HTTP/2

If you look closer at the address bar of any PWA, you’ll notice ‘https’ instead of an older and still more common ‘http.’ This is because progressive web apps use new HTTP/2 that requires encrypted HTTPS connection. (Yet, it doesn’t mean that every website with ‘https’ in the address bar uses HTTP/2 and not HTTP/1.)

With HTTP/2, all the data is cut into chunks and transferred via TCP stream, which is almost 80% faster than HTTP/1. This test shows the time difference in building an image on a page via HTTP/2 and HTTP/1.

The positive effect of HTTP/2 is even more evident on image/animation-heavy websites. That’s why many online shops and business card websites redesign their pages as progressive web apps. While ensuring fast data transfer, PWAs allow them to take advantage of quality illustrations to capture potential customer’s attention.

Progressive web app manifest

A manifest is a JSON file linked to a progressive web app’s directory. The file contains different settings that define a PWA’s icon, its background and theme colors, font, splash screen design, as well as initial orientation for mobile devices.

What’s more, a manifest can be configured to send a prompt to install a PWA on a user’s mobile device (or save it as a bookmark in a desktop browser). When such offer is accepted, a progressive web app gets an official permit to join the list of ‘Apps’ in the Settings menu. From that moment on, it’s fully functional as a regular mobile app. Yet, unlike native apps, it weighs only about a hundred of kilobytes.

Push notifications

Usually, once a user opens a progressive web app in a desktop or mobile browser, the app will ask if they want to subscribe to notifications. After choosing to subscribe, the user receives a personal ID, which tailors their notifications to the content they view.

PWA’s push notifications exist thanks to Push Manager and Push API. The Manager regularly checks the state of an app in passive mode and sends an update to either a browser or, if the app is already installed on a user’s device, the OS.

Development advantages

Thanks to all their enhanced features, progressive web apps can offer performance to rival that of both hybrid and native apps. Yet, what makes it a reasonable choice to opt for web application development of a PWA instead of the other types of web and mobile apps?

Discoverability

Since progressive web apps reside in browsers (at least, until they gain a user’s trust and are installed on a mobile device), they are as easy to search-engine-optimize and, as a result, to discover, as any website or regular web app.

For quite some time, PWA fans have been wishing to see progressive web apps in Google Play or a separate store. In December 2017, Google promised that, by mid-2018, Chrome Apps would be replaced with PWAs. The promise hasn't been fulfilled yet, but it would've definitely attracted a new audience to progressive web apps and expanded their already broad discoverability.

Cross-browserness

The functionality of progressive web apps is 100% supported by all the most popular browsers: Chrome, Firefox and Opera. Google and Microsoft have been popularizing PWAs for a while now: Google offers toolkits for creating and auditing progressive web apps in Chrome, while Windows 10 was reported to become fully compatible with progressive web apps by the end of 2018. (Which came true.)

Apple has been giving PWAs a cold shoulder for a while: Safari treated PWAs as regular web apps and didn’t allow home screen installation, push notifications or caching. Since August 2017, Apple has been promising to show more support for progressive web apps, and both PWA Manifest and Server Worker for Safari were put in development. As of iOS 14.8, released in April 2021, Apple has acknowledged the existence of PWAs both in word and in deed.

Cheap and fast development

Given the advantages of PWAs, you can guarantee high performance of your apps even with the minimum investment. Besides, when creating a progressive web app, you get a desktop website, an Android app, and (if you use Cordova as a wrapper) an iOS app: a 3-in-1 solution.

Conclusion

Just a few years ago, the PWA stats website featured success stories from just a few large brands and a lot of niche IT companies. Now, when Apple has finally yielded to the PWA concept, the number of success stories from world-known enterprises is overwhelming. Easy to develop, discover, navigate and install, progressive web apps offer a new web experience to both desktop and mobile users of all platforms.