Comprendre les Progressive Web Apps

Comprendre les Progressive Web Apps

15 octobre 2018|Mots-clés : , , |
  • thumb progressive web app

La Progressive Web App est un des sujets tendances du moment en matière de développement digital. Se situant entre la web app et l'application native, elle s'impose comme une alternative à l'hégémonie des app stores et aux limites des navigateurs. Quelles sont ces nouvelles fonctionnalités qui la rendent si séduisante ?

PWA pour les intimes

Commençons par deux définitions pour remettre les choses dans leur contexte :

  • Une application web est un site web avec contenu interactif, optimisé pour une consultation depuis un navigateur
  • Une application native est une application développée pour un système d'exploitation bien spécifique (iOs ou Android, majoritairement). On y accède principalement via des stores (App Store, Play Store) et elles peuvent utiliser des fonctions de votre smartphone comme l'appareil photo, le GPS …

Une Progressive Web App se situe entre une application web et une application native. La PWA s’inspire directement des meilleurs process de chaque interface : le meilleur du web puisque l’accès à une PWA se fait via un navigateur, sans téléchargement, et le meilleur des applis natives grâce à son icône sur l'écran d'accueil et son accès hors ligne.

Le must d’une PWA ? L’utilisation hors connexion

offline access

C’est l’un des plus gros atouts des Progressive Web Apps. Lors de la première visite (sur le navigateur), les données des pages sont mises en cache grâce aux Services Workers. L’accès au contenu se fait donc sans connexion et immédiatement. Il n’y a donc aucune attente liée à un débit trop lent à cause d’une mauvaise couverture.

Focus sur les Service Workers : il s’agit d’une capacité du navigateur à fournir une couche intermédiaire entre la Web App et le réseau, qui tourne en arrière plan (même quand l’application est fermée). Cette couche « réseau » est capable d’écouter et d’émettre des requêtes, des notifications ou de capturer des changements de connectivité.

Mais aussi...

Une autre force de la PWA est son accessibilité, sachant qu'il est possible de créer une icône sur votre écran d'accueil, sans installation.

Ajoutez à cela :

  • des temps de chargement très courts,
  • des applications sécurisées avec un protocole https,
  • et des notifications push.

C’est une toute nouvelle façon d’utiliser une application depuis son navigateur. Une consommation de contenus web sans connexion !

Compatibilité des navigateurs

Avant de se lancer dans la PWA, il est important de connaître également ses contraintes ! L'ajout de l'icône sur votre écran d'accueil par exemple n'est pas automatique et nécessite une autorisation de l'utilisateur.

Plus problématique encore, tous les navigateurs ne sont pas compatibles avec les services workers.  Attention à bien connaître l'équipement de vos utilisateurs avant de partir sur ce format !

Navigateur Compatibilité
Chrome 40
Edge 17
Chrome 44
Internet Explorer Non supporté
Opéra 24
Safari 11.1
Android Webview Non supporté
Chrome Android 40
Edge Mobile 17
Firefox Android 44.0 (44)
IE Phone Non supporté
Opera Android OK
Safari iOS 11.1

Aujourd’hui, les PWA ne représentent qu’une minorité des applications web. Avec PandaSuite, rejoignez les premiers acteurs des PWA.  Affranchissez-vous des règles du web et des stores en créant dès aujourd’hui votre PWA avec PandaSuite ! Développement natif, développement hybride, développement web, PandaSuite est votre partenaire privilégié pour répondre aux enjeux de demain ! 

À propos de l'auteur :

Aude
Aude - Happy Ambassador & Briseuse de Téléphone 📵 Je vous aide à transformer vos idées en contenu interactif engageant. PandaSuite vous rend les plus choses plus simples pour créer du contenu interactif sans aucune ligne de code (mobile/tablette/ordinateur).