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.
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 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.
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.
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.
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?
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.
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.)
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 were put in development. In 2019, Apple release iOS 11.3 that fully supports PWA.
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.
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.