01 85 77 07 07
Recherche avancée
Par formation
Par date
Par ville
logo HUB Formation
Organisme de Formation
aux Technologies et métiers de L'informatique
La pédagogie au service de la technologie
Accueil > Domaines > Développement > Développer des Progressive Web Apps

Développer des Progressive Web Apps

Avec les PWAs, l'expérience utilisateur s'améliore :

  • des applications plus accessibles puisque ne nécessitant aucune installation,
  • des chargements instantanés grâce aux services worker,
  • la gestion des notifications grâce à la Notification API Notification et la Push API,
  • la sécurité avec des applications HTTPS.

Objectifs

  • Comprendre les principes
  • Connaître les étapes pour mettre en oeuvre votre PWA
  • Mettre en oeuvre les outils pour optimiser votre application

Public

  • Chefs de projets
  • Concepteurs
  • Développeurs
  • Architectes

Prérequis

  • Bonne connaissance de l'intégration Front-End HTML, CSS et JavaScript.

Programme de la formation

Introduction

  • 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étails

  • Rappels sur les principes et API de base : ES6, promises, Fetch...
  • 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.
  • Travaux pratiques : Création et installation d'un Service Worker.

Outils pour la mise en œuvre

  • Bibliothèques, composants et frameworks : Workbox, frameworks intégrant de base les Service Workers.
  • Développement et débogage : outils navigateurs, Lighthouse.
  • Travaux pratiques  : Manipulation des outils navigateurs, de Lighthouse.

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

  • 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 localStorage, mais IndexedDB.
  • Une SPA ultra rapide avec l'architecture Application Shell.
  • Accéder au cache depuis une page.
  • Travaux pratiques : Mise en place du cache sur ressources statiques, sur pages.

Installation de l'application sur l'appareil

  • Le Web App Manifest.
  • La Web App Install Banner.
  • Comportement des différents navigateurs mobiles et desktop.
  • Travaux pratiques : Mise au point du Manifest.

Les notifications et le push de données

  • L'API Notifications.
  • Intégration aux notifications natives de l'OS.
  • Gestion d'autorisation par l'utilisateur.
  • Pousser des données depuis le serveur avec l'API Push.
  • Mise à jour en tâche de fond avec l'API Background Sync.
  • Travaux pratiques : Mettre en place une notification.

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.
  • Travaux pratiques  : Lire un QR code.