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 :

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
 

Made with Slides.com