PWA 

What ?

Sommaire

  • PWA ?
  • Caractéristiques
  • Composantes
  • Cycle de vie
  • Exemples
  • Cas d'utilisation
    • existante
    • moderne
    • mobile

PWA

Une Progressive Web App est une application web proposant une expérience utilisateur améliorée.

 

On peut aussi dire qu'une PWA est une catégorie d'application web proposant des fonctionnalités inspirées des apps.

Caractéristiques

  • Fiable
  • Rapide
  • Engageante

Fiable

HTTPS, chargement rapide et certain de l'application web grâce notamment aux web workers.

Rapide

53% des utilisateurs abandonneront un site si le chargement prend plus de 3 secondes!

Engageante

Propose à l'utilisateur une expérience immersive grâce :

  • Notification API
  • Full screen
  • Interface responsive
  • Install banner
  • Push API

Contrètement

Grâce aux PWA, on peut

  • Installer
    • avec la bannière
    • avec un bouton
  • Avoir le plein écran
  • S'appuyer sur
    • Cache API
    • Depuis les Web Workers
      • Notification API
      • Push API

Composantes

Pour faire une PWA, il faut à minima implémenter ces technologies là.

Cycle de vie

Exemples

https://www.brice.fr

Cas d'utilisation

Possibilités

  • Web app existante
  • Nouvelle web app
  • Web app mobile

Web app existante

Permet principalement de rendre installable l'application et de fiabiliser le rendu :

  • + offline.html
  • + manifest.json
  • + sw.js

Nouvelle web app

Permet de couvrir de nouveaux besoins :

  • Installation avec bannière
  • Gestion du offline
  • Chargement agréable
  • page démarrage différente de /
  • SSE 

Web app mobile

Permet de faire une app adaptée aux besoins des mobinautes :

  • full offline possible
  • install banner / explicitement
  • Push API
  • Notification API
  • Web Share API

Workbox

lib. Web workers

Stale-While-Revalidate

Cache first

Network only

Cache only