What’s the deal with Progressive Web Apps?

But first, let’s review the meaning of “Progressive Web App”:

Application. A PWA is an application, geared primarily to mobile devices.

Web. A PWA is based on modern web technologies: HTML5, CSS3 and JavaScript. A PWA is a web application.

Progressive. This is often the least understood term. It means that the application relies on “progressive improvement*” techniques to provide the user with an experience that’s always optimal, no matter the quality of their connection, their browser, their hardware platform, etc.

Adaptive design, which offers renderings compatible with all screen sizes and orientations, as well as the ability to work offline or with a very poor connection, are also part of the progressive improvement concept*.

Other general characteristics of a PWA are:

• It looks like a standard application, with a launch icon.
• It’s simple to install.
• It’s always updated, requiring no user intervention.
• It allows data to be stored locally.
• It provides access to important peripheral APIs, like the GPS, camera and microphone.
• It provides a good level of security thanks to encrypted communications (HTTPS).
• It can be easily shared, with a simple link (URL).
• Last but not least, it’s easy to find as it’s indexable by web search engines.

These two main technical underpinnings enabled PWAs to come into being:

— WAM (Web App Manifest). The manifest is a JSON text file that contains metadata related to the application. Here, for example you’ll find: the name of the application, its URL, the location of files linked to the icons, the default display mode, etc.

— Service Workers. A SW is a JavaScript file whose main task is to enable caching management at a highly detailed, granular level. It works asynchronously, in a different task from the main script. A SW can also be used to manage tasks like background synchronization, centralizing data updates like those from a GPS or gyroscope, pre-loading resources that we’re pretty sure the user will need at some point, etc.

The main obstacle that’s hindered the adoption of PWAs is that not all platforms support the technology. For a PWA to work optimally on mobile, the default browser must be compatible with the Service Workers and the operating system must know how to use WAMs (as well as support A2HS, “Add to Home Screen,” push and notifications). On desktop, Firefox and Chrome support Service Workers entirely; the basic features are in Opera. For mobile, the situation is pretty much the same for browsers, and WAM support is limited to Android.

This situation, however, is likely to evolve quickly. Edge on Win10 and Safari on macOS will be compatible very soon. In a move that’s likely crucial to the success of PWAs, on January 24th, Apple announced via Rick Mondello, a software engineer who works on Safari, that iOS 11.3 and macOS 10.13.4 will include Service Workers and that iOS 11.3 will use WAMs.

So why are PWAs going to be the next big thing?

PWAs are a response to evolving usage; people are using fewer numbers of mobile applications (mostly the usual suspects, i.e. Snapchat, Facebook, Instagram, WhatsApp, etc.) and time spent on applications is slowly dwindling, in favour of web browsing. Many sites may therefore find it in their own interest to have their own PWA.

Developing and maintaining a native or hybrid application is a significant investment, and the current trend away from apps may lead many businesses to rethink the merits of this choice of technology, and the realities of their return on investment. Of course, there will still be instances where a native application will be unavoidable, but for many industries, like media, banking services, e-commerce etc., the PWA is the ideal solution as it’s the least costly, and the most flexible.

A solid argument in favour of PWAs is their nimbleness and their ease of installation, which disqualifies almost all native/hybrid applications. The reality is that it’s a lot of trouble for users to install a classic application and that the “losses” at every stage of the “funnel” (getting to the app-store page, installing, opening, registering, using) are significant. Overall, you’ll lose 10-20% of prospective users at each step – the chagrin of marketers everywhere! PWAs, on the other hand, greatly simplify the process, and as a result, post fewer losses along the way.

PWAs also provide many advantages that improve retention. One example is the ability to update only the content that’s changed after an update is made available (with a native application, the smallest tweak forces the user to download the entire application again). PWAs are more nimble, more flexible and lower maintenance. For the early adopters, the results are already in: AliExpress’ PWA achieved far better results than web and native applications, with an increase of 104% in conversion rates for new users.

The heavy-hitters are jumping onboard too, for example Twitter’s PWA. Focused on emerging markets and users with low connectivity, Twitter Lite takes less than a megabyte to download. Once launched, it takes less than 5 seconds to work on most 3G devices, and saves up to 70% on data, while loading 30% faster. And thanks to push notifications, you know when you’re quoted, re-tweeted, or messaged. The emergence of Twitter Lite may explain why the company is losing interest in developing native iOS and Android clients.

Google Docs, Gmail, Trello, Slack, Mattermost…these are already web apps. You can do a lot of sexy stuff with a web application. Obviously, applications that require a lot of processing power (video games, video editing, image processing, augmented reality, etc.) can’t do it without C, C++, Java or Swift: JavaScript simply can’t compete. But when you think about it, a large number of applications don’t have these needs, like most of those related to a web service. Take your banking application; it only has to be secure, functional, easy to use and up to date. And incidentally, your banking provider will quickly figure out that it costs them less to maintain a single service for both desktop and mobile.

Epic’s “Zen Garden” demo running in Firefox. he demo is built with WebAssembly and WebGL 2.

Technology is always evolving. One thing to keep an eye on is the W3C WebAssembly standard, for example, which allows you to free JavaScript from the most intensive tasks by executing code natively, which is already supported by most browsers. In the area of emerging technology, on the CSS and visual rendering side, another thing to keep on your radar is Houdini, which provides access to the workings of the browser’s rendering engine.

To sum it up, my gut tells me to tell you to brace yourself for a new wave of PWAs!

(*) Progressive improvement is a development strategy that consists of isolating the solid base of structure and data (HTML, XTML, XML, JSON) from the upper layers of visual presentation (CSS, SVG) and the behaviours and interactions (JavaScript, Ajax). Then you play with graceful degradation of the upper layers so everyone has access to the basic content, while offering an enhanced version to those with a more sophisticated hardware/software configuration or a bigger bandwidth.