Introduction aux
Progressive
Web Applications
Yassine Benabbas
Sylvain Pollet-Villard
Février 2018
Une forte actualité
“A Progressive Web App uses modern web capabilities to deliver an
app-like user experience.”
Google, 2015
Vous avez probablement déjà tous utilisé une PWA
Fiabilité: le site doit se charger instantanément
peu importe les conditions réseau
Rapidité: la navigation et les interactions doivent
toujours être fluides, sans lag dans les
animations et le défilement de la page
Attractivité: le site doit s’intégrer naturellement
à tout appareil avec une expérience utilisateur immersive
3 objectifs principaux
pour une PWA
Les avantages du Web
- Multi-plateforme, indépendant de l'OS
- Indépendant des app stores propriétaires
- Accessible et partageable simplement avec une URL
-
Pas besoin d'être installé pour être utilisé
La valeur ajoutée des PWA
- Une intégration plus poussée avec les plates-formes
- Une UX "app-like" (full screen, splash screens…)
- Fonctionne peu importe la connectivité Internet
- Permet l'envoi de Notifications Push
(même quand l'appli est fermée !)
Les technos web sont par nature rétrocompatibles.
Si une fonctionnalité n'est pas supportée,
l'application reste fonctionnelle.
Ce principe s'appelle l'Amélioration Progressive
Pourquoi Progressive" ?
Illustration de Tiffany Tse
Ingrédients de base
pour une PWA :
- Une application web monopage et responsive
- Un manifeste d'application web
- Un Service Worker
- HTTPS
A compléter éventuellement par :
- Un pré-rendu côté serveur
- Des notifications Push
- HTTP/2
Manifeste d'application Web
Demo time
Service Worker
Thread asynchrone qui tourne en tâche de fond et qui intercepte toutes les requêtes réseau d'une page web
- Il est codé en JavaScript et s'installe sur un domaine
- Il agit comme un proxy entre le navigateur et le réseau
- Très efficace pour gérer le offline, le cache et la ré-écriture d’URL
- Peut être utilisé pour la synchronisation en arrière plan
et les notifications Push
Enregistrement du service worker, côté applicatif :
Actions à l'installation du Service Worker (fichier sw.js) :
Interception des requêtes et utilisation du cache (fichier sw.js) :
Demo time
Résilience réseau
Au délà du online/offline, des situations diverses et complexes.
La connectivité Internet est variable et difficilement mesurable.
Les problématiques et contraintes techniques dépendent
fortement du contexte (ex: usage dans les transports)
Stratégies de gestion réseau
Stratégies communes de gestion du cache :
- Cache en fallback
- Cache, update, refresh
- Precaching
- Autres exemples ici : https://serviceworke.rs
Stratégies communes de gestion d'erreurs:
- Relance commandée par l'utilisateur
- Relance auto avec délai progressif
- Pile de requêtes en échec
Optimistic UI
Compensation de latence
Ne pas attendre la réponse du serveur pour actualiser la vue
permet un gain de performance perçue énorme.
A coupler avec une bonne stratégie de gestion d'erreurs
PWA et Frameworks
Différentes implémentations
Typical PWA Architecture
Outil d'audit: Lighthouse
Un outil open-source de Google
qui génère un rapport avec un score / 100
Disponible en:
- Chrome Devtools
- ligne de commande
- module Node
Pourquoi adopter les PWA comme
nouveau standard de qualité?
-
Aujourd'hui, le traffic web mobile dépasse celui du fixe
- Il y a un effort global d'intégration aux plates-formes
mené par Google avec Android et Microsoft avec Windows 10
- Les "app shells" et outils associés sont industrialisables
- Tout comme avec le Responsive Web Design,
les attentes des utilisateurs vont évoluer rapidement
Notre topic PWA dans la
Travaux et objectifs:
Un support complet de documentation accessible à tous:
pwa-cookbook.js.org
Sensibiliser à la valeur ajoutée des PWA
Des templates projet pour démarrer rapidement
Du support personnalisé pour répondre à vos questions
