Où en sont les Progressive Web Apps ? (2018)
Les Progressive Web Apps, nous en entendons de plus en plus parler et depuis qu’Apple a enfin embarqué dans le train, nul doute qu’elles seront de plus en plus fréquentes sur les écrans de nos téléphones intelligents.
D’abord, rappelons ce que veut dire Progressive Web App :
Application. Une PWA est une application, avant tout destinée aux appareils mobiles.
Web. Une PWA repose sur les technologies du web moderne : HTML5, CSS3 et JavaScript. Une PWA est une application web.
Progressive. C’est souvent le terme le moins compris. Il veut dire que l’application doit faire appel aux techniques d’amélioration progressive afin d’offrir à l’utilisateur une expérience toujours optimale, quels que soient la qualité de sa connexion, son navigateur, sa plateforme matérielle, etc.
Le design adaptatif, qui permet d’offrir un rendu compatible avec toutes tailles et orientations d’écran, et la possibilité de fonctionner hors-ligne ou avec une connexion très dégradée, font également partie du concept d’amélioration progressive*.
Les autres caractéristiques générales d’une PWA sont :
- Ressembler à une application standard, avec une icône de lancement.
- Être simple à installer.
- Demeurer toujours à jour sans intervention de l’utilisateur.
- Permettre le stockage de données en local.
- Avoir l’accès à certaines APIs de périphériques importants comme le GPS, la caméra et le microphone.
- Offrir un bon niveau de sécurité grâce à des communications cryptées (HTTPS).
- Pouvoir être partagée facilement, via un simple lien (URL).
- Et enfin, être facile à découvrir en étant indexable par les moteurs de recherche du web.
Les deux principales briques techniques qui ont permis la naissance des PWAs sont :
— Le WAM (Web App Manifest). Le manifeste est un fichier texte JSON qui contient les métadonnées relatives à l’application. On y trouve par exemple : le nom de l’application, son URL, l’emplacement des fichiers correspondants à ses icônes, le mode d’affichage par défaut, etc.
— Les Service Workers. Un SW est un fichier JavaScript dont la tâche essentielle est de permettre une gestion de la mise en cache selon une granularité très fine. Il fonctionne de manière asynchrone, dans une tâche différente de celle du script principal. Il peut aussi être utilisé pour gérer des tâches comme la synchronisation de données en arrière-plan, centraliser des mises à jour de données comme celles issues du GPS ou du gyroscope, réaliser le préchargement de certaines ressources dont on est à peu près sûr que l’utilisateur aura besoin par la suite, etc.
Le principal obstacle à l’adoption des PWAs est que toutes les plateformes ne supportent pas la technologie. Pour qu’une PWA fonctionne pleinement sur mobile, il faut à la fois que le navigateur par défaut soit compatible avec les Service Workers et que le système d’exploitation sache faire usage des WAMs (et supporter A2HS, “Add to Home screen”, le push et les notifications). Sur desktop, Firefox et Chrome supportent complètement les Service Workers, les fonctionnalités de base sont présentes dans Opera. Sur mobile, la situation est à peu près la même pour les navigateurs et le support des WAMs est cantonné à Android.
La situation devrait cependant évoluer très rapidement. Edge sur Win10 et Safari sur macOS seront très prochainement compatibles. Enfin, ce qui sera sans doute capital dans le succès des PWAs, Apple a annoncé le 24 janvier dernier, par la voix de Rick Mondello, ingénieur logiciel qui travaille sur Safari, que les systèmes iOS 11.3 et macOS 10.13.4 incluraient les Services Workers et qu’iOS 11.3 utiliserait les WAMs.
Pourquoi les PWAs risquent-elles d’être capitales ?
Les PWAs répondent à une évolution des usages, les gens utilisent un nombre de plus en plus restreint d’applications sur mobile (et principalement que des quasi incontournables comme Snapchat, Facebook, Instagram, WhatsApp, etc.) et le temps passé sur les applications se réduit doucement au profit de la navigation sur le web. Beaucoup de sites web pourraient ainsi avoir intérêt à proposer leurs PWA.
Le développement et l’entretien d’une application native ou hybride représentent un investissement important. Cela ajouté au mouvement de désaffection en cours pour les apps peut faire réfléchir les entreprises sur le bien-fondé de ce choix technologique et sur la réalité de leur retour sur investissement. Certes, il restera des cas de figure où une application native sera incontournable, mais pour bien des domaines comme les médias, les services bancaires, le commerce électronique, etc., la PWA sera la solution phare en étant la moins onéreuse et la plus flexible.
Un solide argument en faveur des PWAs est aussi leur légèreté et leur facilité d’installation, qui disqualifieraient presque les applications natives/hybrides. En effet, il faut savoir que ça demande beaucoup de volonté aux utilisateurs d’installer une application classique et que les “pertes” tout au long des étapes du “funnel” (se rendre sur la page de l’app-store, installer, lancer, s’enregistrer, utiliser) sont considérables. En gros, vous perdez 10 à 20 % de vos prospects à chaque étape. Effrayant pour tout markéteur ! En comparaison, la PWA simplifie grandement le processus, et donc diminue les pertes en cours de route.
Les atouts sont en outre nombreux pour améliorer la rétention. Par exemple, avec la possibilité de ne mettre à jour que le contenu qui a changé lorsqu’une mise à jour est disponible (avec une application native, la moindre modification force l’utilisateur à télécharger à nouveau l’application entière). Les PWAs sont plus légères, plus souples et moins exigeantes. Et pour les pionniers, les résultats sont déjà là : La PWA d’AliExpress a obtenu de bien meilleurs résultats que les applications web et natives, avec une augmentation de 104 % des taux de conversion pour les nouveaux utilisateurs.
De grands acteurs s’y mettent, par exemple la PWA de Twitter. Centré sur les marchés émergents et les utilisateurs à faible connectivité, Twitter Lite prend moins d’un mégaoctet à télécharger. Une fois lancée, cette version prend moins de 5 secondes pour être fonctionnelle sur la plupart des appareils 3G, et économiserait jusqu’à 70 % sur les données tout en chargeant 30 % plus rapidement. Et grâce aux notifications push, vous savez quand vous êtes cité, retouitté ou quand vous recevez un message en direct. L’apparition de Twitter Lite explique peut-être pourquoi l’entreprise est en voie d’abandonner le développement de ses clients natifs iOS et Android.
Google Docs, Gmail, Trello, Slack, Mattermost… sont déjà des web apps. On peut faire beaucoup de choses sexy avec une application Web. Bien entendu, les applications qui ont besoin de beaucoup de puissance de traitement (jeux vidéo, montage vidéo, traitement d’images, réalité augmentée, etc.) ne pourront pas se passer de C, C++, Java ou Swift ; JavaScript n’est pas en mesure d’entrer en compétition. Mais quand on y pense, énormément d’applications n’ont pas ces besoins, presque toutes celles liées à un service web par exemple. Votre application bancaire n’a ainsi besoin que d’être sécurisée, fonctionnelle, facile à utiliser et à jour… (Et votre banquier va vite comprendre que ça lui revient moins cher de maintenir un seul service à la fois pour le desktop et le mobile, plutôt que deux apps natives et un service web.)
(Démo de “Zen Garden” d’Epic dans Firefox. La démo est réalisée avec WebAssembly et WebGL 2.)
Enfin, la technologie avance tous les jours. Il faut par exemple surveiller le standard WebAssembly du W3C qui permet de dégager JavaScript des tâches les plus intensives en exécutant du code nativement, et qui est d’ores et déjà supporté par presque tous les navigateurs. Dans les technos émergentes, côté CSS et rendu visuel, il faut aussi s’intéresser aux efforts d’Houdini qui permettra d’avoir accès au fonctionnement du moteur de rendu du navigateur.
Pour conclure, mon intuition me fait dire de vous préparer à une prochaine déferlante de PWAs…
(*) L’amélioration progressive est une stratégie de développement qui consiste à isoler la base persistante que sont la structure et les données (HTML, XTML, XML, JSON) des couches supérieures que sont la présentation visuelle (CSS, SVG) et les comportements et interactions (JavaScript, Ajax). On jouera alors avec la dégradation harmonieuse de ces couches supérieures pour permettre à tous d’avoir accès au contenu et d’offrir une version améliorée à ceux qui disposent d’une configuration matérielle/logicielle plus avancée ou d’une plus grande largeur de bande passante.
What’s the deal with Progressive Web Apps?
Lately, we’ve been hearing more and more about Progressive Web Apps, and since Apple is finally onside, there’s no doubt they’ll soon be coming to a smartphone screen near you.
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.