Progressive web apps: What’s their offer and should you accept it?

After 3 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 pleasant and reliable, regardless of the conditions.

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.

progressive web apps

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 (Chrome, Firefox or Opera) and a network. They are responsible for caching PWA data on a 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.

what makes a mobile app progressive?

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. This will definitely attract a new audience to progressive web apps and expand 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 is reported to become fully compatible with progressive web apps by the end of 2018.

Sadly, Safari handles PWAs as regular web apps and doesn’t allow home screen installation, push notifications or caching, but this is just for now. In August 2017, Apple has announced that they’re going to support progressive web apps too, and both PWA Manifest and Server Worker for Safari are already in development.

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, a Windows Phone app and (if you use Cordova as a wrapper) an iOS app: a 4-in-1 solution.

Development advantages of progressive web apps

Conclusion

Just a year ago, tech experts were saying that were it not for Apple, progressive web apps would have successfully replaced hybrid apps. Now, when Safari and iOS are on their way to supporting PWAs, this is most likely what’s going to happen. Easy to develop, discover, navigate and install, progressive web apps will offer a new web experience to both desktop and mobile users of all platforms.

Related Articles

Mobile web app: When and how it’s better than the other application types
Web application architecture: Components, models and types
Web application framework: What it is, how it works, and why you need it
Source Code Review vs. Penetration Testing for Web Application Security

Ask the Author

Sending the message ...

0/511

Sharing Information

In compliance with GDPR, your personal information will be collected and stored for five years on servers located in the Untied States. After this term is expired, your information will be erased. We will share your information with our development center, located at 2 Leanida Biady str., Minsk, Belarus, where it will be processed. At our headquarters and our development center we apply the same level of care in respect of your information as prescribed with GDPR rules. For more information, please refer to our Privacy PolicyYou may request erasing or updating your personal information here.