Progressive Web App (PWA) : ce qu'elles sont, les avantages et les inconvénients et les principaux exemples sur le marché

Nous vivons dans un monde de plus en plus rapide, dynamique et en constante évolution. Les innovations incrémentales qui ont un impact sur les gens se succèdent, avec un accent de plus en plus clair sur :

la performance, pensez aux appareils de plus en plus puissants que nous utilisons tous les jours ou aux tâches qui nous permettent de faire plus rapidement ;
l’expérience, pour éliminer toute friction dans l’utilisation du logiciel/matériel ;
l’intelligence, avec des algorithmes qui travaillent désormais dans une perspective prédictive.

C’est dans cette direction, en se concentrant principalement sur la performance et l’expérience utilisateur pour l’utilisateur final, que va le développement de la Progressive Web App (PWA), une solution qui veut combiner le meilleur des applications natives et de la technologie Web.

Une Progressive Web App (PWA) est une application qui utilise les capacités du Web moderne pour offrir aux utilisateurs une expérience très similaire (sinon meilleure) à une application native.

Contrairement aux applications traditionnelles, les progressive web apps sont un hybride entre les pages Web ordinaires et les applications mobiles. Le terme “progressif” fait référence au fait qu’elles introduisent de nouvelles fonctionnalités et, du point de vue de l’expérience utilisateur, elles sont initialement perçues comme des sites web normaux mais se comportent progressivement plus comme des apps mobiles, entre autres multiplateformes.

Pros et cons de la Progressive Web App
L’importance du manifeste et des travailleurs de service
Quelles sont les technologies les plus utilisées pour les PWA ?
Comment choisir entre une PWA ou une solution native
Les différences dans le processus d’installation : PWA vs app native
Les principaux exemples d’une Progressive Web App
L’avenir est-il donc “progressif” ?

Pros et cons de la Progressive Web App

Les principales caractéristiques sont :

Progressives – Elles fonctionnent pour chaque utilisateur, quel que soit le navigateur choisi car elles sont construites à la base avec des principes d’amélioration progressive.
Responsive – Ils s’adaptent aux différentes tailles d’écran : bureau, mobile, tablette, ou aux dimensions qui pourront être disponibles ultérieurement.
App-like – Ils se comportent avec l’utilisateur comme s’il s’agissait d’applications natives, en termes d’interaction et de navigation.
Updated – Les informations sont toujours à jour grâce au processus de mise à jour des données proposé par les travailleurs du service.
Sécurisées – Exposées sur le protocole HTTPS pour empêcher la connexion d’afficher des informations ou de modifier le contenu.
Recherchables – Elles sont identifiées comme des “applications” et sont indexées par les moteurs de recherche.
Réactivables – Faciliter la réactivation de l’application grâce à des capacités telles que les notifications web.
Installables – Elles permettent à l’utilisateur de “sauvegarder” les apps qu’il juge les plus utiles avec l’icône correspondante sur l’écran de son terminal mobile (écran d’accueil) sans avoir à affronter toutes les étapes et les problèmes liés à l’utilisation de l’app store.
Liable – Facilement partageable par URL sans installations complexes.
Offline – Il s’agit une fois de plus de faire passer l’utilisateur avant tout, en évitant le message d’erreur habituel en cas de connexion faible ou nulle. Les PWA reposent sur deux particularités : tout d’abord le ” squelette ” de l’appli, qui rappelle la structure de la page, même si son contenu ne répond pas et ses éléments comprennent l’en-tête, la mise en page, ainsi qu’une illustration qui signale que la page est en train de se charger.

Les points faibles concernent :

le support d’iOS à partir de la version 11.3 à partir de;
une plus grande utilisation de la batterie de l’appareil;
tous les appareils ne supportent pas la gamme complète des fonctionnalités PWA (même discours pour les systèmes d’exploitation iOS et Android);
il n’est pas possible d’établir un réengagement fort pour les utilisateurs iOS (schéma URL, notifications web standard);
le support de l’exécution hors ligne est cependant limité ;
manque de présence sur les magasins (il n’y a pas de possibilité d’acquérir du trafic à partir de ce canal);
il n’y a pas d'”organe” de contrôle (comme les magasins) et un processus d’approbation;
accès limité à certains composants matériels des appareils;
peu de flexibilité concernant le contenu “spécial” pour les utilisateurs (par exemple, les programmes de fidélité, la fidélité, etc.).

L’importance du manifeste et des travailleurs de service

Les nouvelles fonctionnalités des navigateurs modernes qui permettent aux PWA d’offrir le meilleur sont le “manifeste” et les “travailleurs de service”.

Manifeste
Il s’agit d’un simple fichier JSON qui définit les paramètres de base de la PWA, pour contrôler la façon dont l’application doit apparaître à l’utilisateur et définir son apparence au lancement : icônes, autres caractéristiques de base comme les couleurs, les polices, l’orientation de l’écran et la possibilité d’être installée sur l’écran d’accueil.

Service workers
Ils sont la véritable clé des expériences avancées qu’une PWA peut offrir. Un travailleur de service est un script que le navigateur exécute en arrière-plan, séparé d’une page Web, pour utiliser des fonctions qui ne nécessitent pas de page Web ou d’interaction avec l’utilisateur.

Aujourd’hui, les SW incluent déjà des fonctions telles que les notifications push et la synchronisation en arrière-plan. À l’avenir, ils prendront en charge des fonctions telles que la synchronisation périodique ou le geofencing. La fonction principale est la capacité d’intercepter et de gérer les requêtes réseau, y compris la gestion programmatique d’un cache de réponses. C’est une API qui prend en charge les expériences hors ligne en donnant aux développeurs un contrôle complet de l’expérience.

Avec l’ajout de la prise en charge des travailleurs de service dans la dernière version d’iOS, Apple a ouvert la porte aux PWA pour atteindre, à toutes fins utiles, l’ensemble du marché mobile.

Quelles sont les technologies les plus utilisées pour les PWA ?

Il existe plusieurs technologies pour la création d’une Progressive Web App, principalement basées sur JavaScript, avec des caractéristiques différentes.

Parmi les principales, nous avons :

React
Une puissante bibliothèque JavaScript pour la création d’interfaces utilisateur dynamiques et modernes
Polymer
Une combinaison de composants, outils et de modèles conçus pour créer des PWA
Angular
Un framework JavaScript pour créer des applications web dynamiques qui utilise le HTML comme langage de template
Ionic
Un framework JavaScript pour créer de puissantes applications pour plusieurs plateformes à l’aide d’un code basique
Accelerated Mobile Pages (AMP)
Un projet open source visant à améliorer les performances des pages web

Comment choisir entre une PWA ou une solution native

Le moment du choix arrive, quelle solution adopter ?

Il est préférable de choisir le développement d’une PWA lorsque :

L’application doit être facilement distribuée à une base d’utilisateurs encore plus large
Le budget disponible n’est pas élevé
Il y a peu de temps disponible pour la mise en ligne
Une indexation correcte sur les moteurs de recherche est importante
Une compatibilité multiplateforme est nécessaire
Plus de mises à jour sont nécessaires dans un temps restreint

Au contraire, il est préférable de développer une application native lorsque :

Il est nécessaire de se déplacer sur les stores
La rapidité et la réactivité sont des points clés pour le succès de l’app
L’app nécessite une utilisation importante des caractéristiques matérielles de l’appareil
Le modèle économique est basé, par exemple, sur le coût par téléchargement et / ou IAP (In App Purchase)
L’app doit être intégrée avec d’autres apps tierces

Les différences dans le processus d’installation : PWA vs app native

Le processus général d’installation des apps natives suit ce flux :

Accès au Store de référence (App Store ou Google Play)
Recherche de l’app
Clic sur “Installer”
Acceptation des différentes autorisations
Ouvrir et lancer l’app
Utilisation de l’app

Dans la comparaison, l’installation de la PWA comprend :

Visiter le site
Ajout à l’écran d’accueil de l’appareil (facultatif)
Ouverture de l’app
Utilisation de l’app

Les principaux exemples d’une Progressive Web App

Il existe déjà de nombreux exemples de PWA “distingués” que les utilisateurs utilisent sur leurs appareils et parmi les principaux nous signalons :

Pour en savoir plus :
Addy Osmani sur Medium >Une étude de cas sur les performances des applications Web progressives de Pinterest

Instagram

La PWA actuelle est très similaire à l’application native et possède toutes les principales fonctionnalités d’interaction, des notifications à la possibilité de consulter les Stories.

Google Maps

Pour en savoir plus:
The Next Web >Le Maps Go léger de Google n’est qu’une Progressive Web App

Tinder

Pour en savoir plus :
Addy Osmani sur Medium >Une étude de cas sur les performances d’une application Web Tinder progressive

Twitter Lite

Pour en savoir plus :
Blog Twitter >Comment nous avons construit Twitter Lite
Google Developers >La PWA Twitter Lite augmente significativement l’engagement et réduit l’utilisation des données
Paul Armstrong sur Medium >Twitter Lite et React Progressive Web Apps haute performance. Apps at Scale

YouPorn

Maternidad y todo

Progressive Web App (PWA) : ce qu’elles sont, les avantages et les inconvénients et les principaux exemples sur le marché