PWA, another Way to Envision the Mobile Experience

29 March 2017
pwa-blog-article-bewoopi.jpeg

The context

Today, the digital economy is at the center of a marketing puzzle. The time spent on mobile devices is growing very fast, to the detriment of the experience on computer, and this increase concerns the mobile web as well as the use of applications. On the other hand, if the total number of views is to the advantage of the mobile web, the total usage time is considerably higher for mobile applications, of the order of 7 to 1. The reason for this inclination of users and From developers to native (or hybrid applications) comes mainly from the features it offers: Managing slow / offline connections, receiving push notifications, synchronizing data in the background … Technical elements therefore, on considerations of performances and functionalities, which favor the applications with respect to the mobile web. But all this could change soon.

comscore

What is a Progressive Web App ?

To try to reconcile these two apparently competing models, Google has worked for several years on a concept combining the best of the web and the best applications. The purpose of these PWAs is to use the latest features of the web to provide an application-like user experience, keeping the benefits of the web.

In the advantageous characteristics of the PWAs, it can be noted that they are:
– Reponsives: their interface adapts to any form factor of the device on which they are executed
– Capable of operating off-line or on low reception networks
– Capable of receiving push notifications
– Safe (served via HTTPS)
– Can be integrated into the home screen of a mobile device like any mobile application

PWAs do not just bring native functionality to the mobile web. They also address the real issues facing native application publishers today. Indeed, search engine optimization makes it possible to offer visibility to an application that would probably be invisible on an AppStore in the middle of millions of other applications. The absence of an installation process is another improvement in the user experience: a recent report indicates that 65% of users download 0 applications per month, whether for reasons of process time, Necessary memory space or simply lack of opportunity. With PWA, users discover apps naturally via their web browsing, are invited to install them when they have manifested interest through repeated visits. The installation is then instantaneous with a very light app.

pwa-image

Moreover, publishers are much more tempted by this kind of development, which is free from the “development by platform” aspect. PWAs work anywhere on the web, whether they are installed or not, no matter which device is accessing it. This significantly reduces development costs, facilitates and streamlines maintenance, and allows greater freedom in monetization (no price brackets, no percentage paid back to Apple or Google).

It’s pretty nice, but how does it work?

The cornerstone of these new applications is called Service Worker. This is a script that runs in the browser and supports offline experiments. Service Workers also intelligently manage caching to improve application performance and include other features that have been previously restricted to native or hybrid applications, such as location management or push notifications.

pwa-image-blog-bewoopi

A Service Worker can be compared to a proxy cache that runs on the client side. Its behavior is programmed in a JS file which installs in the user’s browser at the first loading of the site. It then runs every time the Web App is loaded, and intercepts each HTTP request to return the most appropriate answer, whether it comes from the network, a dedicated cache or even generated on the fly. For security reasons, these scripts can only work on secure sites with HTTPS. If no page needs this script (which runs in an independent thread), it is put “dormant” to save battery.

These Services Workers allow you to fill the screens within an Application Shell. This name refers to the HTML / CSS / Javascript database that is the “shell” of a PWA. The shell application corresponds to the part of code that would be sent to the AppStore for a native application, manages the loading and browsing of the application, and allows the user interface to be executed locally. It is in this shell that the web pages are loaded.

A new way to consider the mobile web?

The arrival of Progressive Web App and Google’s effort in their improvement will change the way we develop for the Web.
On the user side, the habit of not installing a native application for everything will be a real novelty, a helping hand to take. Realizing that a single site can gradually become a complete application that is added to the home screen, working offline, receiving push notifications and loading instantly will change usage and facilitate “test facilities” .

On the developers side, we must take into account the new aspect of these PWAs and go through two phases: The phase which has already begun, of experiments of all kinds, to prove the viability of the system and to test all its limits, but also Identify good and bad practices. Then the democratization phase, which will come when these applications of a new genre will be integrated into all the Web frameworks.
Support for Service Workers is already present on Chrome, Opera and Firefox, and will likely come soon for Safari iOS and Internet Explorer / Edge for Windows Phone.

app-shell-pwa-blog-bewoopi.jpeg

It is now up to developers to build on the existing functionality by making mobile apps as close to the native experience as possible, in order to convince users of their interest and thus accelerate the development of what could be the Next revolution of mobile uses.