Toutes nos formations sont désormais disponibles en "Live Virtual classes". Contactez-nous pour plus d’informations : formation@oxiane.luToutes nos formations sont désormais disponibles en "Live Virtual classes". Contactez-nous pour plus d’informations : formation@oxiane.lu

Progressive Web Apps (PWA)

Accueil » Formations » Progressive Web Apps (PWA)

La notion de « Progressive Web App » (PWA) est encore très récente. Elle consiste à mettre en œuvre un ensemble de nouveaux standards du Web pour apporter aux sites et applications Web les capacités jusqu’ici réservées aux applications mobiles natives ou hybrides : installation locale, performance, fonctionnement hors connexion, notifications push, etc.

Cette approche peut être structurante pour un projet web responsive car elle demande une réflexion en amont pour assurer une bonne conception.

Au-delà d’une introduction historique et théorique, cette formation pratique apporte les clefs pour la mise en œuvre des Progressive Web Apps dans un contexte de site de contenu, multi pages.

1650 € HT 3 jours PWA2

Appréhender et mettre en œuvre les progressive web apps (PWA)

Programme

Introduction

  • Petit retour sur l’histoire de la mobilité
  • L’impact de la mobilité sur le Web
  • Comparatif forces/faiblesses entre applications mobiles natives et Web

Les composants de base des PWA

  • Un proxy dans le navigateur avec les Service Workers
  • La sécurité imposée avec HTTPS
  • Quel support dans les navigateurs ?
  • La dimension « progressive » dans les PWA
  • Le Service Worker en détail
  • Rappels sur quelques API de base : promesses, Fetch, ES2015
  • Le cycle de vie d’un Service Worker
  • L’installation : téléchargement, périmètre d’action (scope)
  • La mise à jour
  • Le déclenchement, les événements pris en charge

Outils pour la mise en œuvre

  • Bibliothèques, composants et frameworks facilitant le développement : workbox (ex sw-precache), frameworks integrant de base les Service Workers et Manifest
  • Outils de développement et débogage : devtools des navigateurs, lighthouse

Outils pour la mise en œuvre

  • Bibliothèques, composants et frameworks facilitant le développement : Workbox (ex sw-precache), frameworks intégrant de base les Service Workers
  • Outils de développement et débogage : devtools des navigateurs, Lighthouse

API cache : tolérance de défaillance réseau et offline

  • Les opérations de base sur l’API cache depuis un Service Worker
  • Quels contenus peuvent être en cache ?
  • Gestion du cycle de vie des contenus en cache
  • Autres moyens de stockage : pas de support de LocalStorage, mais IndexedDB
  • Une SPA ultra rapide avec l’architecture Application Shell

Installation de l’application sur l’appareil

  • Le Web App Manifest
  • La Web App Install Banner
  • Le comportement des différents navigateurs mobiles et desktop

Installation de l’application sur l’appareil

  • Le Web App Manifest
  • La Web App Install Banner
  • Le comportement des différents navigateurs mobiles et desktop

Les notifications

  • L’API Notifications
  • L’intégration aux notifications natives de l’OS
  • La gestion de l’autorisation par l’utilisateur

Le push de données

  • Pousser des données depuis le serveur avec l’API Push
  • Mise à jour en tâche de fond avec l’API Background Sync

Autres capacités nouvelles sur le Web pour aller plus loin

  • Paiement simplifié avec l’API Payment Request
  • Lecture de QR code avec les API getUserMedia/Stream et Shape Detection
  • Réalité virtuelle et réalité augmentée