Progressive Web Apps (PWA)

Publié le 15 juin 2020 par Adrien Saint

Qu’est-ce qu’une Progressive Web App (PWA)?

Les progressive web apps sont des applications qui  reposent à 100% sur les API web, qui au premier contact ont l’apparence d’une web app classique (navigateur internet avec barre d’url visible) et qui progressivement peuvent prendre l’apparence et le comportement d’une application native.

Où classer les PWA?

Voici quelques points de vocabulaire afin de vous guider dans les différentes possibilités de développement qui sont proches des PWA :

Le site web mobile est un second site qui prend le relais du site principal lorsque l’utilisateur est sur une tablette ou sur un smartphone.

Un site Internet « Responsive » est un site conçu avec un Design Responsive, c’est-à-dire dont le design s’adapte à tous les supports.

Une application Web (Webapp) est un site Internet développé pour les tablettes/mobiles. Par extension, elle désigne aussi une web application.

L’application mobile native est un logiciel, une application mobile développée pour un système d’exploitation spécifique (iOs, Android, …). On la télécharge via des plateformes dédiées, comme l’App Store ou le Play Store.

L’application hybride est une version hybride d’une application web et d’une application native. Elle s’exécute via un store et s’adapte à tous les systèmes d’exploitation.

Les Progressive Web Apps (PWA) sont des applications proches de toutes ces différentes interfaces. Elles utilisent le meilleur des technologies du Web (HTML5) associées aux fonctionnalités des applications pour offrir une expérience utilisateur inégalée. Ainsi, elles ressemblent beaucoup aux applications natives et hybrides à ceci près qu’elles sont accessibles depuis un navigateur et non un store. Elles se situent aussi à mi-chemin entre la Webapp et le site Web mobile.

 

Comment fonctionne une PWA?

La PWA est en fait un site internet développé spécifiquement pour les mobiles. Pour cela, elle repose sur une architecture de type Application Shell, ce qui rend possible son utilisation en mode hors-ligne.

PWA shell

Elle s’appuie ensuite sur les Service Workers, des scripts qui fonctionnent en parallèle de la page Web. Ils permettent le mode hors-ligne, l’envoi de notifications ou la mise à jour des contenus en arrière-plan.

Elle utilise un fichier .manifest (json) qui permet de lui donner un rendu plus natif (affichage plein écran sans barre d’adresse, orientation de l’écran possible, icônes identifiables, personnalisation de la couleur de la barre d’adresse, …).

 

Quels sont les avantages d’une PWA?

Une expérience utilisateur nettement améliorée

– Un temps de chargement considérablement réduit
– Une utilisation sans connexion Internet
– Elles sont Responsive, donc compatibles avec n’importe quel système d’exploitation et n’importe quel support (pc, tablette, mobile)
– Pas d’installation requise
– Les PWA sont accessibles depuis une URL ou directement depuis une icône sur l’écran d’accueil du mobile
– Elles ne prennent pas de place dans la mémoire du mobile
– Elles sont sécurisées (protocole HTTPS)
– Une expérience immersive grand écran, semblable aux applications natives.

Voici quelques bonnes raisons de passer aux PWA :

1.Un développement moins coûteux
2.Une application SEO-friendly
3.Une application sécurisé
4.Une application fiable
5.Une application engageante

 

Et pour finir, voici quelques exemples de PWA que nous aimons beaucoup:

  • Twitter Mobile (https://mobile.twitter.com/)
  • L’Equipe (https://m.lequipe.fr)
  • Flipkart (https://www.flipkart.com/)
  • Pokedex.org (https://www.pokedex.org/)

 

 

sources:

https://www.eurelis.com/blog/introduction-progressive-web-app
http://blog.ippon.fr/2017/11/05/progressive-web-app/

SUR LE MÊME
THèME

restez
informés

Abonnez-vous à notre newsletter pour être certain d’avoir un autre regard sur le numérique, vu dans haut, en panoramique !