PWA - Progressive Web Applications

Des bases solides pour développer des progressive web applications

Description du cours

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.

Ce cours permet aux participants d'acquérir les compétences suivantes

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

Prix: 1460€ HT
Durée: 2 jours
Modalité: Inter en présentiel (demander une formation en intra-entreprise)

Prochaines dates :

Nantes 10 Octobre 2019 S'inscrire
Nantes 7 Novembre 2019 S'inscrire

PROGRAMME DE LA FORMATION

Module 1

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
Module 2

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'
  • Atelier: Installer un premier service worker
  • Atelier: Debuggage d'une PWA
  • Atelier: Prendre le contrôle des événements
  • Atelier: Découvrir les événements 'install', 'activate' et 'fetch'
Module 3

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
  • Atelier: Mettons en place un app-shell
  • Atelier: Rendons notre application disponible hors ligne
  • Atelier: Manipulons le cache d’un service worker
  • Atelier: Utilisation de workbox pour gérer son cache
Module 4

Aller plus loin avec le service worker

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

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
Module 6

Engager l'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
  • Atelier: Mise en place d’une notification avec Action
  • Atelier: Mise en place d’un système de Push notification
Module 7

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
  • Atelier: Utilisation de l’api de geolocalisation, fullscreen
  • Atelier: Mise en place d’une authentification WebAuthN
Module 8

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 pattern P.R.P.L
Module 9

Tour des outils pouvant nous aider

  • Les outils pouvant aider à la réalisation d’une PWA
  • Zoom sur les CLIs: Angular, Vue, React, ...
  • Présentation de Workbox
  • Atelier: Audit avec LightHouse CI

Formations suggérées

JavaScript les fondamentaux du langage (JSFOND)

2 jours

JavaScript développer des applications web (JSDEVWEB)

2 jours

ECMAScript (ECMASCRIPT)

2 jours

TypeScript (TYPESCRIPT)

2 jours

Vue.js (VUEJS)

3 jours

Angular (ANGULAR)

3 jours

RxJS programmation réactive (RXJS)

2 jours

Nous contacter

Paris

48 Rue Jacques Dulud

92200 Neuilly-sur-Seine

+33 1 41 38 52 00

Lille

74 rue des Arts

59800 Lille

+33 3 66 72 61 32

Strasbourg

Crystal Park, 1 Avenue de l'Europe

67300 Schiltigheim

+33 3 88 47 04 38

Luxembourg

2, rue Drosbach

L-3372 Leudelange, Luxembourg

+352 26 54 47 1

Bordeaux

c/o Mama Works, 51 quai Lawton

33300 Bordeaux

Nantes

Zero Newton, 3 Rue Albert Camus

44000 Nantes

+33 2 55 59 07 00