Progressive web app

Un article de Wikipédia, l'encyclopédie libre.
Sauter à la navigation Sauter à la recherche

Une progressive web app (PWA, applications web progressives en français[1]) est une application web qui consiste en des pages ou des sites web, et qui peuvent apparaître à l'utilisateur de la même manière que les applications natives ou les applications mobiles. Ce type d'applications tente de combiner les fonctionnalités offertes par la plupart des navigateurs modernes avec les avantages de l'expérience offerte par les appareils mobile[2],[3].

Une PWA se consulte comme un site web classique, depuis une URL sécurisée mais permet une expérience utilisateur similaire à celle d'une application mobile, sans les contraintes de cette dernière (soumission aux App-Stores, utilisation importante de la mémoire de l'appareil…).

Elles proposent de conjuguer rapidité, fluidité et légèreté tout en permettant de limiter considérablement les coûts de développement[4] : plus besoin de faire des développements spécifiques pour les applications en fonction de chacune des plateformes : iOS, Android

Historique[modifier | modifier le code]

En 2005[réf. nécessaire], les technologies du web sont passées de documents statiques (HTML) à des solutions dynamiques exécutées côté serveur avec les langages Php ou asp. Lors de l’arrivée des smartphones en 2007, les technologies du web ne font pas le poids face aux applications mobiles. Ces dernières offrent une bien meilleure expérience utilisateur. Les ressources packagées et l'accès direct aux fonctions du téléphone ont permis aux applications natives d’être beaucoup plus utilisées que les technologies web mobiles.

Au milieu des années 2010, cependant, les améliorations continues en HTML5, CSS3 et JavaScript ainsi que des navigateurs web plus performants et conformes aux normes, ont fait des applications hybrides performantes une alternative viable.

En 2015, Frances Berriman et l’ingénieur de Google Alex Russell proposent le terme de  "progressive web apps"  pour décrire les sites Internet profitant des nouveaux avantages donnés par les navigateurs web notamment avec l’arrivée des Web worker (en) et des manifest file (en).

Caractéristiques des PWA[modifier | modifier le code]

Google a mis en place une liste de contrôles établissant une note via l’outil Lighthouse intégré dans le navigateur chrome qui permet de vérifier automatiquement le respect des caractéristiques suivantes :

Progressive 
Comme leur nom le laisse deviner, les applications web progressives fonctionnent sur n'importe quel périphérique en intégrant les fonctionnalités disponibles du navigateur et de l'appareil utilisé.
Sécurisée 
Afin de répondre aux problématiques de sécurité des échanges entre les utilisateurs et les sites, les PWA doivent impérativement être fiables et sûres par la mise en place d’un protocole HTTPS.
Engageante[5] 
Elles proposent une expérience utilisateur immersive en plein écran et un réengagement facilité grâce à l'envoi de notifications push web.
Installable 
L'utilisation d'un fichier manifest permet aux PWA de proposer, à l'instar d'une application mobile native, l'installation d'un raccourci sur l'écran d'accueil du terminal mobile.
Rapidité 
D'après Google, 53% des internautes abandonnent un site si le chargement prend plus de 3 secondes. Une fois le site chargé, la navigation doit se faire de manière rapide et fluide.
Optimisation pour le référencement 
Utilisant les technologies du web, les progressive web app peuvent être référencées sur les moteurs de recherche de la même manière que n'importe quel site web classique.
Indépendante de la connexion 
Grâce à la gestion du cache via l’utilisation d’un Service Worker, une fois le contenu chargé une première fois, il est possible de le consulter même dans les zones de faible connexion réseau.

Technologies[modifier | modifier le code]

Les technologies utilisées sont celles employées pour concevoir les sites web (html , CSS , javascript) avec en plus :

Un fichier manifest[modifier | modifier le code]

Le fichier manifeste de l'application web est une spécification W3C définissant un fichier écrit au format JSON pour définir les métadonnées d'une application web comprenant:

  • Le nom de l'application Web
  • Liens vers les icônes d'application Web ou les objets d'image
  • L'URL préférée pour lancer ou ouvrir l'application Web
  • Les données de configuration de l'application Web pour un certain nombre de caractéristiques
  • Déclaration pour l'orientation par défaut de l'application Web
  • Permet de définir le mode d'affichage, par ex. plein écran

Un service workers[modifier | modifier le code]

Les service workers fournissent un proxy interne au navigateur Web pour gérer les requêtes Web/HTTP. Les Service workers se situent entre le réseau et la partie visible du navigateur pour fournir le contenu. Ils sont capables d'utiliser les mécanismes de cache efficacement et permettent un comportement sans erreur pendant les périodes hors connexion. Les Service workers sont écrits en langage javascript.

Un outil de développement[modifier | modifier le code]

Une pwa doit être mise à disposition du public via un lien sécurise (https) mais en phase de développement un serveur web classique est suffisant (http sur localhost). Google chrome fournit dans le panneau pour les développeurs un outil pour vider les données, déréférencer l'application et voir le statut du service worker. Il y a aussi l'outil lighthouse[6] maintenant intégré au navigateur qui permet d'évaluer l'application avec une notation comprise entre 0 et 100.

Exemples de pwa[modifier | modifier le code]

Liste de PWAs
nom Description Lien
Air Horner une corne de brume [1]
Emojoy messagerie via emojoy [2]
Flipkart Lite shopping [3]
Guitar Tuner accorder une guitare [4]
Koolsol jeu de solitaire [5]
Memory Game PWA jeu de mémoire [6]
Notepad bloc note [7]
Progressive Web App.Store store d'applications [8]
QR Code Scanner scanner un code QR [9]
Smaller Pictures compresseur d'images [10]
SplittyPie gestionnaire de cagnotte de groupe [11]
Twitter Twitter [12]
Voice-memos mémo vocale [13]

Références[modifier | modifier le code]

  1. « Applications web progressives », sur Mozilla Developer Network (consulté le 15 janvier 2018)
  2. Illustration par l'exemple de la différence entre site web, Progressive Web App et application native : https://www.powertrafic.fr/progressive-web-app-lequipe/
  3. https://fredcavazza.net/2018/02/11/pourquoi-les-progressive-web-apps-sont-la-seule-alternative-viable-aux-applications-natives/
  4. « Progressive Web Apps : 5 raisons de s'y intéresser - Infographie », progressive-web-apps,‎ (lire en ligne)
  5. « Améliorer l’engagement grâce aux Progressive Web Apps », progressive-web-apps,‎ (lire en ligne)
  6. « Lighthouse - Google Developers »

Liens externes[modifier | modifier le code]