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 > Mobile > PWA - Progressive Web Applications

PWA - Progressive Web Applications

Des bases solides pour développer des progressive web applications

En 2015, Alex Russell introduisait, dans un article devenu célèbre, le terme “Progressive Web App”, une nouvelle approche des Web Apps permettant, à la jonction du mobile et du web, d’améliorer l’expérience utilisateur en exploitant au mieux de nouveaux concepts et technologies. Depuis, les PWA se sont popularisées, les technologies sous-jacentes étant devenues largement supportées par les navigateurs. Ainsi, l’approche “progressive” est-il devenu non plus une solution parmis tant d’autres, mais une méthodologie incontournable pour la réalisation de web apps modernes. Durant cette formation, nous verrons non seulement comment exploiter les technologies modernes sous-jascente, comme les services workers, le manifest ou encore la push API, afin de rendre votre web app installable, ajouter un mode offline, ou encore déclencher des notifications. Mais nous verrons surtout comme appliquer cette méthodologie complète à votre développement web afin d’obtenir des applications performantes, intégrées, fiables et engageantes.

Objectifs

  • Compréhension et manipulation des concepts associés aux PWA.
  • Manipulation des outils de débogage d’une PWA

Public

  • Développeurs, intégrateurs, architectes logiciel, chefs de projet technique

Prérequis

  • Connaître les bases de la programmation d’application web (ES6).
  • Connaissances de base en Git
  • Développement front-end avec NPM
  • Installer nodejs (LTS) : https://nodejs.org/
  • Installer git : http://git-scm.com/
  • Votre éditeur favori (nous recommandons Visual Studio Code)
  • Installer Chrome et au moins un autre browser à jour (Edge, Safari, Firefox)

Programme de la formation

Introduction

  • Origines du concept
  • Définition du terme F.I.R.E.
  • Environnement de développement et de débogage
  • Point sur les exercices à venir
  • Point sur la sécurité dans les applications web
  • Atelier: Mise en place d’un environnement de développement PWA

Manipulation des Services Workers

  • Fonctionnement des services workers
  • Installation d’un service worker
  • Compréhension du cycle de vie d’un service worker. Comment agir sur le cycle de vie
  • Manipulation des events du service worker: event ‘install’, ‘activate’, ‘fetch’
  • Ateliers:
    • Installer un premier service worker
    • Débogage d’une PWA
    • Prendre le contrôle des événements
    • Découvrir les événements ‘install’, ‘activate’ et ‘fetch’

Gestion des stratégies de cache

  • Présentation du concept d’App-shell
  • Découvrons l’API de cache du service worker
  • Découverte des stratégies de cache
  • Découverte du mode offline
  • Présentation de Workbox
  • Ateliers:
    • Mettons en place un app-shell
    • Rendons notre application disponible hors ligne
    • Manipulons le cache d’un service worker
    • Utilisation de workbox pour gérer son cache

Aller plus loin avec le service worker

  • Découverte de l’event ‘message’
  • Découverte de l’évent ‘sync’
  • Ateliers:
    • Mise en place d’une communication cross onglets basé sur l’événement ‘message’
    • Mise en place du background-sync pour l’envoi de messages

Rendre l'application installable

  • Présentation du manifest
  • Présentation des enjeux de l’installation d’une PWA
  • Comment rendre une PWA disponible sur les Stores
  • Atelier: Création d’un manifest et installation de l’application

Engageons notre utilisateur

  • Présentation des concepts d’UX de l’engagement utilisateur
  • Utilisation de l’événement ‘push’ du service worker
  • Découverte des notifications web
  • Comment débugger une notification
  • Ateliers:
    • Mise en place d’une notification avec Action
    • Mise en place d’un système de Push notification

Intégration à la plateforme

  • Découverte des possibilités d’intégration d’API “Natives” : Geolocalisation, FullScreen
  • Authentification simplifiée avec webAuthN
  • PaymentRequest API
  • Liste des APIs disponibles
  • Design Responsive
  • Ateliers:
    • Utilisation de l’api de geolocalisation, fullscreen
    • Mise en place d’une authentification WebAuthN

Améliorer la performance de l’application

  • Retour sur les formats d’images à utiliser et les techniques associées
  • Bonne pratiques de la performance web
  • Présentation du pattern P.R.P.L.
  • Atelier: Mise en place du P.R.P.L pattern

Tour des outils pouvant nous aider

  • Liste d’outils pouvant aider à la réalisation d’une PWA
  • CLI Angular, Vue, React, …
  • Présentation de Workbox
  • Atelier: Audit avec LightHouse CI