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é

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

Manifeste d'application Web

Demo time

Service Worker

• 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

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