PWA : Qu'est-ce qu'une Progressive Web App ?

Partager l'article

On entend beaucoup parler des Progressive Web Apps, qui pourraient révolutionner le monde des applications mobiles.

Youdemus, agence web à Paris, se penche pour vous sur le "phénomène".

Une progressive Web App (PWA), c'est quoi ? Brève explication.

En des termes simples, une Progressive Web App combine le meilleur d'un site Web et d'une application mobile : la PWA est construite comme un site Web mais agit comme une application. Un site internet camouflée derrière une application !

Quelques adaptions sont nécessaires au site web; le design est adapté, l'interactivité est plus poussée et les pages plus dynamiques.

Vous voulez voir à quoi cela ressemble ? Twitter propose, en allant dans les réglages de sa version mobile de site, d'installer sa Progressive Web App.

Pourquoi utiliser une Progressive Web App ?

Pour utiliser une application, il faut tout d'abord trouver l'application sur l'Apple Store ou le Play Store, la télécharger, l'installer et et l'ouvrir.

Selon une étude, on estime que l'on perdrait 20% des utilisateurs à chacune de ces étapes.

Dans le cas d'une PWA, cette dernière est directement utilisable dès que trouvée. Pas de perte de temps avec le téléchargement et l'installation.

D'un point de vue d'une entreprise, les avantages sont multiples. Le développement d'une PWA est moins coûteux et le temps de réalisation moins important.

La PWA permet de contourner les App Stores : nul besoin d'y figurer puisque la PWA est accessible via une URL.

Picto idée

Quelles sont les caractéristiques d'une PWA ?

Une Progressive Web App est visible dans les moteurs de recherche

En ayant été conçue comme un "vrai" site internet, la PWA est nativement "référençable" par les moteurs de recherche. On peut donc la trouver avec une requête effectuée via Google. Et comme les recherches dans les moteurs de recherche sont beaucoup plus nombreuses que dans les magasins d'applications mobiles, la PWA bénéficie de beaucoup plus de visibilité qu'une application iPhone ou Android. Enfin, les Web Apps permettent de se détacher des règles dictées par les App Store et consorts.

Une Progressive Web App possède une connectivité indépendante

En d'autres termes, elle est utilisable en cas de faible connectivité, ou encore mieux : hors ligne (en stockant des informations sur le smartphone), avec pour certaines peut-être un fonctionnement plus limité.

Une progressive Web App est sûre

Le protocole https de la PWA garantit une navigation sécurisée.

Une Progressive Web App est installable

Une PWA est simple d'accès, puisqu'elle s'installe directement sur l'écran d'accueil de l'appareil.

Son chargement est rapide.

Elle prendra moins de place sur le périphérique qu'une application native. Pour exemple, la PWA de Twitter pèse mois d'1 Mo, contre plus de 100 Mo pour l'application classique.

Une Progressive Web App possède un lien

Une PWA est conçue comme un site Web, et est dont dotée d'autant d'URLs qu'elle est composée de pages.

Une Progressive Web App est "responsive"

Sa conception et son interface s'adaptent au périphérique (à la taille et à la forme de l'écran) : la PWA est responsive et son ergonomie est pensée pour une utilisation tactile.

Une Progressive Web App s'actualise

Lorsque de nouveaux contenus sont publiés, et en présence d'une connexion internet, les nouvelles informations se chargent dans l'application en direct.

Côté mises à jour, l'App s'actualise de manière automatique lors de son chargement. Pas besoin de se soucier de la version de l'application !

Picto engrenages

Côté technique, fonctionnement d'une PWA

Une PWA est développée à partir de langage web client, qui permet de gérer l'interface utilisateur de chaque page. Elle fonctionne à partir des 3 "éléments" suivants :

  • App Shell
  • Service Worker
  • Manifest

L'App Shell est le squelette de l'application, dans lequel sont diffusées les données. L'App Shell contient les éléments principaux d'interface et ceux nécessaires au fonctionnement de l'interface utilisateur. Les éléments sont conservés en local, les contenus sont quant à eux récupérés depuis une API.

Le Service Worker constitue la base technique de diverses fonctionnalités qui différencient les PWA des sites web classiques. Grâce à ce concept, la PWA est par exemple disponible hors-ligne ou permet la réception de notifications push.

Grâce à un fichier JSON, appelé manifest, l'app peut être disponible dans un store (via l'indexation des métadonnées) ou s'installer sur l'écran d'accueil de l'utilisateur. C'est un fichier descriptif qui rend l'application plus native, avec un affichage plein écran, la possibilité de changer l'orientation de l'écran, parmi d'autres options.

Conclusion : pensez à utiliser les PWA !

Les PWA constituent donc une nouvelle expérience utilisateur en passe de devenir incontournable.

Elles flirtent sur une vraie habitude de consommation ; les utilisateurs de smartphone sont encore chaque jour plus nombreux. Et ceux qui surfent sur internet via leur mobile sont également chaque jour de plus en plus nombreux.

Une autre donnée à prendre en compte est l’algorithme Google qui favorise de plus en plus les versions mobiles des sites internet.

Plus qu'une tendance, les PWA ont tout compris.

Partager l'article
À propos de l'auteur
Axel Paratre
Ingénieur de formation, Axel a co-fondé l'agence web Youdemus en 2013 dans laquelle il exerce la fonction de Directeur Technique. Sa maîtrise approfondie du CMS WordPress, ainsi que ses compétences avancées en administration de systèmes, constituent la pierre angulaire de son expertise.

D'autres articles à découvrir

Envie d'échanger sur votre projet ?

Nous contacter