Les Progressive Web App (PWA) : Définition, fonctionnalités et fonctionnement

Format hybride entre un site web responsiv et une application mobile, les Progressive Web App font de plus en plus parler d’elles. Dans cet article, nous allons découvrir l’histoire des PWAs, les fonctionnalités qu’elles proposent et comment elles fonctionnent techniquement.

 

Un peu d’histoire…

L’histoire des PWA remonte aux années 2000, lorsque les technologies web ont évolué de documents statiques (HTML) à des solutions dynamiques exécutées côté serveur (PHP).

Cependant, avec l’arrivée des smartphones en 2007, les technologies web ne sont plus adaptées aux usages des mobinautes et l’émergence des applis offre une expérience utilisateur nettement supérieure.

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

En 2015, Frances Berriman et l’ingénieur de Google Alex Russell ont proposé le terme « progressive web apps » pour décrire les sites Internet profitant des nouveaux avantages offerts par les navigateurs web, notamment avec l’arrivée des Service Workers et des fichiers manifestes : les PWA sont nées !

Une PWA qu’est-ce que c’est ?

Les PWA sont un format hybride entre un site web responsif et une application mobile. Il s’agit d’applications web qui peuvent ressembler à des applications natives ou mobiles et qui combinent les fonctionnalités des navigateurs modernes avec les avantages de l’expérience utilisateur sur les appareils mobiles. Les PWA peuvent être consultées comme un site web classique, mais offrent une expérience similaire à celle d’une application mobile, sans les contraintes liées à celle-ci.

Les PWA offrent rapidité, fluidité et légèreté, tout en permettant de limiter considérablement les coûts de développement. Plus besoin de faire des développements spécifiques pour chaque plateforme (iOS, Android, etc.) !

Quelles sont les fonctionnalités d’une PWA ?

Les Progressive Web App offrent un certain nombre de fonctionnalités pour améliorer l’expérience utilisateur par rapport à un simple site responsiv design :

  • ajout de l’icône de la PWA sur l’écran d’accueil
  • chargement et transition fluide entre les pages
  • gestion du mode hors ligne ou réseau dégradé
  • accès à certains capteurs du terminal tels que le GPS, l’accéléromètre et le gyroscope
  • envoi de notifications.

Il est important de noter que certaines de ces fonctionnalités, comme la gestion du cache pour le mode hors ligne, existent également en dehors des PWA, mais avec un certain nombre de limitations.

Tous Les Jeudis

Techniquement comment ça marche ?

Techniquement, une PWA est composée de trois éléments clés :

1. Le respect d’un ensemble de bonnes pratiques pour garantir les performances et la sécurisation du site

2. L’ajout d’un fichier web app manifest (fichier JSON) qui décrit les propriétés du site

3. L’implémentation de service workers (fichiers JavaScript) qui permettent, en s’appuyant sur le cache du navigateur, de donner accès à l’application web en mode déconnecté et de gérer les push notifications. Les service workers permettent également de gérer les différentes versions du site et de rafraîchir le cache en cas d’évolution du site. Il est important de noter que PWA n’est pas un langage de développement ou un framework, mais plutôt une combinaison d’éléments qui reposent sur des standards existants.

Les PWA offrent un grand nombre de fonctionnalités pour améliorer l’expérience utilisateur et peuvent être une alternative viable aux applications natives. Leur développement est également plus abordable, alors pourquoi ne pas se laisser tenter…

Partager cet article

Envie d’en savoir plus ou d’être accompagné sur ce type de problématiques digitales, n’hésitez pas à nous contacter !

Articles liés

PDF et référencement SEO : tout ce que vous devez savoir

Dans cet article, nous allons voir comment Google traite les PDF, pourquoi il n'est pas toujours recommandé de diffuser du contenu web via un PDF et comment optimiser un PDF…

8 Conseils pour optimiser l’objets de vos e-mailings

La réussite de vos campagnes d'emailing dépend en grande partie de la qualité de l'objet de vos messages. Pour inciter vos destinataires à ouvrir vos emails, il est important de…

Progressive web app vs Appli mobile : Avantage PWA !

Les Progressive Web Apps (PWA) offrent de nombreux avantages pour les marques, notamment en termes de référencement, de coûts de développement et d'indépendance vis-à-vis des stores, mais ce n’est pas…