Progressive Web Apps : pourquoi c’est important de s’y mettre ?

Si vous bossez avec des développeurs s’intéressant à l’actualité du secteur, vous aurez sans doute déjà entendu ce sigle : PWA. Souvent accompagné d’autres termes plus ou moins établis comme SPA, Push Notifications, Offline First ou Web Workers, PWA n’est pas qu’un buzzword de plus.

DĂ©finition rapide d’une PWA

Le terme PWA, pour Progressive Web Apps, représente un ensemble de principes et de techniques à appliquer à une web app mobile pour que son “look and feel” se rapproche au maximum d’une app native.

Mise à jour (octobre 2018) : Depuis Chrome 70, les PWA peuvent également être installées sur Windows et Linux.

En voici les 3 principes fondateurs :

  1. Accès hors ligne
    Une PWA doit être accessible quelque soit l’état du réseau. Grâce aux Service Workers, le développeur peut intercepter les requêtes réseau, mettre les réponses en cache, et servir le cache si la requête s’y prête ou si le réseau est indisponible.
  2. Ajout à l’écran d’accueil
    Une PWA doit être accessible facilement de la même façon qu’une appli native. Via le Web App Manifest, le développeur peut choisir le nom de l’application, son icône sur l’écran d’accueil, l’URL à ouvrir au lancement, et le splash screen à afficher en attendant le chargement de l’application.
  3. Expérience mobile fluide et immersive
    Une PWA doit correctement s’afficher sur les écrans de toutes tailles et résolutions, être rapide, réduire au maximum les temps d’attente entre deux pages, et profiter des dernières fonctionnalités des navigateurs modernes pour engager l’utilisateur, comme les notifications push.

Les grands acteurs du web Ă  la manoeuvre

Google
Pensé, marketé et en parti financé par Google, la firme américaine compte bien imposer son idée du web mobile à grand renfort de meetups et d’ateliers à destination des développeurs. Rien de plus efficace qu’une communauté de développeurs acquis à une cause pour faire pression sur les quelques acteurs récalcitrants.

Apple
Les PWA étant des applications installables sans passer par l’App Store, Apple n’était évidemment pas leur premier soutien. Il a fallu attendre le printemps 2018 pour que le navigateur d’Apple, Safari, prenne enfin en charge les Web Workers, essentiels au bon fonctionnement des progressive web apps.

Twitter
L’un des tous premiers à proposer une web app implémentant les principes des PWA, avec la nouvelle version de Twitter Lite en avril 2017.

Microsoft
Le géant des PC a fait une entré tardive mais remarquée dans le milieu des progressive web apps, en annonçant que ces dernières pourraient être disponibles via le Microsoft Store. C’est le premier store à proposer à la fois des applis natives et des PWA.

D’autres exemples de PWA : Uber, FT, Telegram, AliExpress

Deux avantages majeurs

  1. Référencement : Le principal avantage d’une PWA, c’est qu’elle peut être référencée et trouvée sur les moteurs de recherche.
  1. Mutualisation : Autre avantage intéressant, une seule équipe de développeurs web peut coder et maintenir une progressive web app utilisable sur Android, iOS, MacOS, Linux et Windows.

J’espère que cet article vous aura permis de mieux comprendre l’engouement autour des PWA, et surtout pourquoi il est important de s’y mettre dès maintenant.

A propos de l'auteur

Le dev du coin

Je suis un développeur web freelance basé à Paris, spécialisé dans le développement frontend (Angular, React, VueJS, etc). Je fais également du développement personnalisé de thèmes et de plugins pour WordPress.

Ajouter un commentaire

Laisser un commentaire

Le dev du coin

Je suis un développeur web freelance basé à Paris, spécialisé dans le développement frontend (Angular, React, VueJS, etc). Je fais également du développement personnalisé de thèmes et de plugins pour WordPress.

Sur les réseaux

Derniers articles