Organisme de Formation aux technologies et métiers de L'informatique
Effectuez une recherche
recherche
Accédez à votre espace client
Une question ? Contactez-nous
éditeurs domaines cursus certifications cpf

Formation PWA - Progressive Web Applications

Des bases solides pour développer des progressive web applications

Télécharger le plan de cours
Demander un devis
Obtenir un renseignement

Informations générales

PWA
2 jours (14h)
1 200 €HT

Objectifs

Après ce cours, vous serez capable de :

  • Identifier et manipuler des concepts associés aux PWA.
  • Manipuler des outils de débogage d’une PWA

Public

Ce cours s'adresse avant tout aux personnes suivantes :

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

Prérequis

Pour suivre ce cours, vous devez déjà posséder les connaissances suivantes :

  • 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

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.

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
plus d'infos

Méthode pédagogique

Chaque participant travaille sur un poste informatique qui lui est dédié. Un support de cours lui est remis soit en début soit en fin de cours. La théorie est complétée par des cas pratiques ou exercices corrigés et discutés avec le formateur. Le formateur projette une présentation pour animer la formation et reste disponible pour répondre à toutes les questions.

Méthode d'évaluation

Tout au long de la formation, les exercices et mises en situation permettent de valider et contrôler les acquis du stagiaire. En fin de formation, le stagiaire complète un QCM d'auto-évaluation.

Suivre cette formation à distance

  • Un ordinateur avec webcam, micro, haut-parleur et un navigateur (de préférence Chrome ou Firefox). Un casque n'est pas nécessaire suivant l'environnement.
  • Une connexion Internet de type ADSL ou supérieure. Attention, une connexion Internet ne permettant pas, par exemple, de recevoir la télévision par Internet, ne sera pas suffisante, cela engendrera des déconnexions intempestives du stagiaire et dérangera toute la classe.
  • Privilégier une connexion filaire plutôt que le Wifi.
  • Avoir accès au poste depuis lequel vous suivrez le cours à distance au moins 2 jours avant la formation pour effectuer les tests de connexion préalables.
  • Votre numéro de téléphone portable (pour l'envoi du mot de passe d'accès aux supports de cours et pour une messagerie instantanée autre que celle intégrée à la classe virtuelle).
  • Selon la formation, une configuration spécifique de votre machine peut être attendue, merci de nous contacter.
  • Pour les formations incluant le passage d'une certification la dernière journée, un voucher vous est fourni pour passer l'examen en ligne.
  • Pour les formations logiciel (Adobe, Microsoft Office...), il est nécessaire d'avoir le logiciel installé sur votre machine, nous ne fournissons pas de licence ou de version test.
  • Horaires identiques au présentiel.

Mis à jour le 14/11/2023