Tout savoir sur les Progressive Web Apps

0
82

Il peut être difficile de choisir entre une application web ou une application native car tous deux possèdent des avantages et des inconvénients qui leur sont propres. L’application native est rapide, puissante et peut mieux exploiter les capacités matérielles de votre appareil. Cependant, elle doit être téléchargée et installée sur un appareil compatible. L’application Web prend la forme d’un site internet et s’utilise directement via un navigateur web. Elle nécessite aucune installation et peut être utilisée sur n’importe quelle plateforme. Ces fonctionnalités se limite généralement à celles du navigateur.

 

Une progressive web app (ou application web progressive) permet de trouver un compromis entre application web et application native.

C’est quoi une application web progressive

Les Progressive Web Apps (PWA) sont des applications web conçues pour être flexibles, fiables, rapides et installables.  Elles prennent avantage des fonctionnalités offertes par les navigateurs web modernes pour reproduire une expérience d’utilisation similaire à celle d’une application native ou mobile, sans pour autant partager les mêmes contraintes que celles-ci.

Les PWA ne nécessitent pas une souscription à une boutique d’application tel que l’App Store ou Google Play, elles sont téléchargeables sur le web et peuvent être installées sur n’importe quel appareil. Elles s’utilisent également en mode hors-ligne et sont capables de recevoir des notifications push, de synchroniser des donnes en arrière-plan et faire usage des nombreuses fonctionnalités de votre appareil (GPS, caméra, capteurs…).

Les composantes d’une application web progressive

Les PWA se composent de pages ou de sites web. Elles comportent également un MANIFEST (un document JSON) qui contient les paramètres de démarrage et les valeurs par défaut de l’application, notamment, le nom de l’application, les couleurs, l’icône pour créer le raccourci sur les appareils mobile. Le navigateur va utiliser ces informations pour déterminer comment afficher les pages web sous forme d’application.

Les PWA nécessitent également un « Service Worker » qui est un fichier JavaScript que votre navigateur exécute en arrière-plan (en dehors du contexte des pages web) et joue le rôle d’un proxy entre l’application web, et le navigateur ou le réseau.

Les caractéristiques d’une application web progressive

Au lieu d’investir dans une application mobile ou native, vous pouvez transformer votre site web, votre blog ou SPA en une application web progressive, ce qui vous reviendra moins cher.  L’outil « Lighthouse », intégré dans le navigateur Google Chrome, permet de vérifier le respect des caractéristiques suivantes :

  • Progressive : Les PWA doivent être capables de fonctionner sur n’importe quel périphérique en intégrant les fonctionnalités du navigateur web et celles de l’appareil utilisé.
  • Sécurisée : La sécurité et la fiabilité des PWA seront assurées par la mise en place d’un protocole HTTPS.
  • Engageante : Les PWA offre une expérience utilisateur immersive en plein écran et favoriser le réengagement grâce à l’envoi de notifications push web.
  • Installable : Tout comme une application mobile, une PWA doit offrir la possibilité à l’utilisateur de créer un raccourci sur l’écran d’accueil de son terminal.
  • Rapidité : Une fois le site chargé, la navigation doit se faire de manière rapide et fluide.
  • Indépendante de la connexion : Une fois le contenu d’une PWA chargé une première fois, il sera consultable même dans les zones de faible connexion réseau.
  • Optimisation pour le référencement : les PWA peuvent être référencées sur les moteurs de recherche de la même manière que n’importe quel site web.

A noter que depuis 2019, il est possible de publier des PWA directement via le Play Store.

Quelques exemples d’application web progressive.

En 2020, Google avait annoncé vouloir remplacer les Chrome Apps par des PWA. Cette transformation concerne les services tels que Google Drive, Google Photos et Google Maps. D’autres géants du web se sont prêtés au jeu, à l’instar de :

  • Twitter qui propose une version Lite de son service de microblogging, téléchargeable sur mobile. Ce PWA utilise moins de données et nécessite moins d’espace de stockage que l’application mobile.  Elle peut fonctionner en mode hors ligne et peut également capable de prendre en charge les notifications push.
  • Uber qui dispose d’une PWA capable de fournir un accès rapide ces principaux services à ses utilisateurs, même ceux qui n’ont pas l’application mobile.  Les utilisateurs peuvent réserver un trajet, quels que soient leur système d’exploitation, le type d’appareil ou leur connectivité.
  • Spotify, la plateforme de streaming musical, qui propose une PWA qui promet une expérience utilisateur exceptionnelle tant en termes d’accessibilité, de vitesse et de fonctionnalité. Cette offre vient complémenter ses applications mobiles et natives (pour ordinateur).
  • Flipboard, l’agrégateur de contenu, qui se décline en tant qu’application mobile et PWA. Flipboard permet à ces lecteurs de se tenir au courant de tous les sujets d’actualités et les événements qui les intéressent.

Parmi cette liste non exhaustive, on peut également citer Ali Express, Forbes, BMW, Pinterest, Tinder, Wego et SoundSlice qui ont également opté pour cette approche.