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
NiortWeb - PWA (19.11.19)
By Florent Fremont
