Progressive Web Apps 200

Nous avons actuellement 3 façons de faire des applications mobiles : le natif, l’hybride et l’HTML5. Cependant, en survitaminant les applications HTML5 avec quelques nouveaux concepts, nous obtenons les Progressive Web Apps. En ajoutant une allure d’application, un mode offline, la push notification et le fait de pouvoir l’installer en plus de la sécurité, du responsive et de la performance, nous obtenons une application quasi native mais en JavaScript ! Pour nous aider à faire tout cela, les services workers, le manifest et d’autres API estampillées W3C sont là.

Prochaines formations

Strasbourg

Les formateurs SFEIR

Bruno

Développeur depuis plus de 10 ans et après avoir touché à de nombreuses technos back et front dont Angular JS, Bruno s'est pris d'une grande passion pour Angular depuis sa sortie. Orienté de plus en plus vers Javascript et les technos front, il saura vous transmettre sa passion.

Cyril

CTO Front chez SFEIR, Cyril est aussi Google Developer Expert Front-End. Il est fondateur du meetup Paris WebComponents et de Best of Web, le best of des meetups web parisiens. Avec lui, nul doute que vous prendrez du galon sur les meilleures technos front, en toute décontraction!

Fabien

Développeur Front depuis plus de 10 ans, Fabien a appris Angular grâce aux SFEIR Schools et souhaite maintenant vous permettre d’en faire de même.

Jean-Francois

Directeur Engineering Sfeir Nantes, GDE Web Technologies et Leader du @GDGNantes. Jean-François, homme aux multiples casquettes développe depuis bientôt 15 ans. Le web est son terrain de jeux et la communauté sa passion.

Raphael

Raphaël est un véritable passionné par le développement web. Après avoir développé sur AngularJS puis Angular, il s’est découvert une vraie passion pour le framework VueJS, framework qu’il a déjà mis en place sur son projet client. Le développement web lui permet aussi d’apporter sa touche de UI sur les projets sur lesquels il collabore. Bien que développeur front-end, Raphaël est également co-organisateur du Chti’JUG à Lille, ce qui lui permet de s’enrichir sur bien d’autres sujets du monde de l’informatique. Zythophile, Raphael est aussi un grand amateur de sport.

Renaud

Développeur back convaincu, Renaud a enfin level up pour devenir un développeur full stack. C'est un développeur curieux et toujours à l'affût des nouvelles technologies, aussi bien côté développement que côté culture DevOps. Renaud sera ravi de vous présenter la puissance et les avantages des Progressive Web App.

Romain

Développeur passionné par les technologies du web, c’est avec grand plaisir que Romain vous partagera son expérience en React.

Déroulement de la formation

Présentation des participants

Déroulement de la formation

Concepts généraux


Jour 1


A la découverte des concepts PWA

Module: Introduction - 1h

  • 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: Manipulation des Services Workers - 2h

  • 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’

Module: Gestion des stratégies de cache - 2h

  • 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

Bonus : Module: Aller plus loin avec le service worker - 1h

  • 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

Jour 2


Fidélisation de l’utilisateur

Module: Rendre l’ application installable - 2h

  • Présentation du manifest
  • Présentation des enjeux de l’installation d’une PWA
  • Comment rendre une PWA disponible sur les Stores

Ateliers:

  • Création d’un manifest et installation de l’application

Module: Engageons notre utilisateur - 2h

  • 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

Bonus : Module: Intégration à la plateforme - 2h

  • 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

Module: Améliorer la performance de l’application - 1h

  • 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.

Ateliers:

  • Bonus : Mise en place du P.R.P.L pattern
  • Bonus : Module: Tour des outils pouvant nous aider- 1h
  • Liste d’outils pouvant aider à la réalisation d’une PWA CLI Angular, Vue, React, …

Présentation de Workbox

Ateliers: * Audit avec LightHouse CI

S'inscrire
SFEIR SCHOOL

Progressive Web Apps 200

du Mardi 9 Juin
au Mercredi 10 Juin

à Strasbourg

Nous avons actuellement 3 façons de faire des applications mobiles : le natif, l’hybride et l’HTML5. Cependant, en survitaminant les applications HTML5 avec quelques nouveaux concepts, nous obtenons les Progressive Web Apps. En ajoutant une allure d’application, un mode offline, la push notification et le fait de pouvoir l’installer en plus de la sécurité, du responsive et de la performance, nous obtenons une application quasi native mais en JavaScript ! Pour nous aider à faire tout cela, les services workers, le manifest et d’autres API estampillées W3C sont là.

Formateur SFEIR

Bruno

Développeur depuis plus de 10 ans et après avoir touché à de nombreuses technos back et front dont Angular JS, Bruno s'est pris d'une grande passion pour Angular depuis sa sortie. Orienté de plus en plus vers Javascript et les technos front, il saura vous transmettre sa passion.

Déroulement de la formation

Présentation des participants

Déroulement de la formation

Concepts généraux


Jour 1


A la découverte des concepts PWA

Module: Introduction - 1h

  • 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: Manipulation des Services Workers - 2h

  • 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’

Module: Gestion des stratégies de cache - 2h

  • 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

Bonus : Module: Aller plus loin avec le service worker - 1h

  • 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

Jour 2


Fidélisation de l’utilisateur

Module: Rendre l’ application installable - 2h

  • Présentation du manifest
  • Présentation des enjeux de l’installation d’une PWA
  • Comment rendre une PWA disponible sur les Stores

Ateliers:

  • Création d’un manifest et installation de l’application

Module: Engageons notre utilisateur - 2h

  • 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

Bonus : Module: Intégration à la plateforme - 2h

  • 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

Module: Améliorer la performance de l’application - 1h

  • 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.

Ateliers:

  • Bonus : Mise en place du P.R.P.L pattern
  • Bonus : Module: Tour des outils pouvant nous aider- 1h
  • Liste d’outils pouvant aider à la réalisation d’une PWA CLI Angular, Vue, React, …

Présentation de Workbox

Ateliers: * Audit avec LightHouse CI

Inscription

SFEIR s'engage à protéger et à respecter votre vie privée. Nous n'utiliserons vos données personnelles que pour administrer votre compte et vous fournir les produits et services demandés.

Je comprends et j'accepte

Nous aimerions vous contacter ponctuellement au sujet de nos produits et services, ainsi que d'autres contenus susceptibles de vous intéresser. Si vous consentez à ce que nous vous contactions à cette fin, veuillez cochez la case suivante :

J'accepte de recevoir d'autres communications de SFEIR.

En cliquant sur « Envoyer » ci-dessus, vous autorisez l’entreprise SFEIR à stocker et traiter les données personnelles soumises afin qu’elle vous fournisse le contenu demandé.

SFEIR SCHOOL

Progressive Web Apps 200

Nous avons actuellement 3 façons de faire des applications mobiles : le natif, l’hybride et l’HTML5. Cependant, en survitaminant les applications HTML5 avec quelques nouveaux concepts, nous obtenons les Progressive Web Apps. En ajoutant une allure d’application, un mode offline, la push notification et le fait de pouvoir l’installer en plus de la sécurité, du responsive et de la performance, nous obtenons une application quasi native mais en JavaScript ! Pour nous aider à faire tout cela, les services workers, le manifest et d’autres API estampillées W3C sont là.

Formateur SFEIR

Déroulement de la formation

Présentation des participants

Déroulement de la formation

Concepts généraux


Jour 1


A la découverte des concepts PWA

Module: Introduction - 1h

  • 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: Manipulation des Services Workers - 2h

  • 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’

Module: Gestion des stratégies de cache - 2h

  • 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

Bonus : Module: Aller plus loin avec le service worker - 1h

  • 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

Jour 2


Fidélisation de l’utilisateur

Module: Rendre l’ application installable - 2h

  • Présentation du manifest
  • Présentation des enjeux de l’installation d’une PWA
  • Comment rendre une PWA disponible sur les Stores

Ateliers:

  • Création d’un manifest et installation de l’application

Module: Engageons notre utilisateur - 2h

  • 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

Bonus : Module: Intégration à la plateforme - 2h

  • 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

Module: Améliorer la performance de l’application - 1h

  • 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.

Ateliers:

  • Bonus : Mise en place du P.R.P.L pattern
  • Bonus : Module: Tour des outils pouvant nous aider- 1h
  • Liste d’outils pouvant aider à la réalisation d’une PWA CLI Angular, Vue, React, …

Présentation de Workbox

Ateliers: * Audit avec LightHouse CI

Inscription

SFEIR s'engage à protéger et à respecter votre vie privée. Nous n'utiliserons vos données personnelles que pour administrer votre compte et vous fournir les produits et services demandés.

Je comprends et j'accepte

Nous aimerions vous contacter ponctuellement au sujet de nos produits et services, ainsi que d'autres contenus susceptibles de vous intéresser. Si vous consentez à ce que nous vous contactions à cette fin, veuillez cochez la case suivante :

J'accepte de recevoir d'autres communications de SFEIR.

En cliquant sur « Envoyer » ci-dessus, vous autorisez l’entreprise SFEIR à stocker et traiter les données personnelles soumises afin qu’elle vous fournisse le contenu demandé.

SFEIR SCHOOL

Progressive Web Apps 200

Nous avons actuellement 3 façons de faire des applications mobiles : le natif, l’hybride et l’HTML5. Cependant, en survitaminant les applications HTML5 avec quelques nouveaux concepts, nous obtenons les Progressive Web Apps. En ajoutant une allure d’application, un mode offline, la push notification et le fait de pouvoir l’installer en plus de la sécurité, du responsive et de la performance, nous obtenons une application quasi native mais en JavaScript ! Pour nous aider à faire tout cela, les services workers, le manifest et d’autres API estampillées W3C sont là.

Formateur SFEIR

Déroulement de la formation

Présentation des participants

Déroulement de la formation

Concepts généraux


Jour 1


A la découverte des concepts PWA

Module: Introduction - 1h

  • 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: Manipulation des Services Workers - 2h

  • 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’

Module: Gestion des stratégies de cache - 2h

  • 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

Bonus : Module: Aller plus loin avec le service worker - 1h

  • 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

Jour 2


Fidélisation de l’utilisateur

Module: Rendre l’ application installable - 2h

  • Présentation du manifest
  • Présentation des enjeux de l’installation d’une PWA
  • Comment rendre une PWA disponible sur les Stores

Ateliers:

  • Création d’un manifest et installation de l’application

Module: Engageons notre utilisateur - 2h

  • 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

Bonus : Module: Intégration à la plateforme - 2h

  • 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

Module: Améliorer la performance de l’application - 1h

  • 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.

Ateliers:

  • Bonus : Mise en place du P.R.P.L pattern
  • Bonus : Module: Tour des outils pouvant nous aider- 1h
  • Liste d’outils pouvant aider à la réalisation d’une PWA CLI Angular, Vue, React, …

Présentation de Workbox

Ateliers: * Audit avec LightHouse CI

Inscription

SFEIR s'engage à protéger et à respecter votre vie privée. Nous n'utiliserons vos données personnelles que pour administrer votre compte et vous fournir les produits et services demandés.

Je comprends et j'accepte

Nous aimerions vous contacter ponctuellement au sujet de nos produits et services, ainsi que d'autres contenus susceptibles de vous intéresser. Si vous consentez à ce que nous vous contactions à cette fin, veuillez cochez la case suivante :

J'accepte de recevoir d'autres communications de SFEIR.

En cliquant sur « Envoyer » ci-dessus, vous autorisez l’entreprise SFEIR à stocker et traiter les données personnelles soumises afin qu’elle vous fournisse le contenu demandé.

SFEIR SCHOOL

Progressive Web Apps 200

Nous avons actuellement 3 façons de faire des applications mobiles : le natif, l’hybride et l’HTML5. Cependant, en survitaminant les applications HTML5 avec quelques nouveaux concepts, nous obtenons les Progressive Web Apps. En ajoutant une allure d’application, un mode offline, la push notification et le fait de pouvoir l’installer en plus de la sécurité, du responsive et de la performance, nous obtenons une application quasi native mais en JavaScript ! Pour nous aider à faire tout cela, les services workers, le manifest et d’autres API estampillées W3C sont là.

Formateur SFEIR

Déroulement de la formation

Présentation des participants

Déroulement de la formation

Concepts généraux


Jour 1


A la découverte des concepts PWA

Module: Introduction - 1h

  • 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: Manipulation des Services Workers - 2h

  • 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’

Module: Gestion des stratégies de cache - 2h

  • 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

Bonus : Module: Aller plus loin avec le service worker - 1h

  • 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

Jour 2


Fidélisation de l’utilisateur

Module: Rendre l’ application installable - 2h

  • Présentation du manifest
  • Présentation des enjeux de l’installation d’une PWA
  • Comment rendre une PWA disponible sur les Stores

Ateliers:

  • Création d’un manifest et installation de l’application

Module: Engageons notre utilisateur - 2h

  • 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

Bonus : Module: Intégration à la plateforme - 2h

  • 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

Module: Améliorer la performance de l’application - 1h

  • 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.

Ateliers:

  • Bonus : Mise en place du P.R.P.L pattern
  • Bonus : Module: Tour des outils pouvant nous aider- 1h
  • Liste d’outils pouvant aider à la réalisation d’une PWA CLI Angular, Vue, React, …

Présentation de Workbox

Ateliers: * Audit avec LightHouse CI

Inscription

SFEIR s'engage à protéger et à respecter votre vie privée. Nous n'utiliserons vos données personnelles que pour administrer votre compte et vous fournir les produits et services demandés.

Je comprends et j'accepte

Nous aimerions vous contacter ponctuellement au sujet de nos produits et services, ainsi que d'autres contenus susceptibles de vous intéresser. Si vous consentez à ce que nous vous contactions à cette fin, veuillez cochez la case suivante :

J'accepte de recevoir d'autres communications de SFEIR.

En cliquant sur « Envoyer » ci-dessus, vous autorisez l’entreprise SFEIR à stocker et traiter les données personnelles soumises afin qu’elle vous fournisse le contenu demandé.

SFEIR SCHOOL

Progressive Web Apps 200

Nous avons actuellement 3 façons de faire des applications mobiles : le natif, l’hybride et l’HTML5. Cependant, en survitaminant les applications HTML5 avec quelques nouveaux concepts, nous obtenons les Progressive Web Apps. En ajoutant une allure d’application, un mode offline, la push notification et le fait de pouvoir l’installer en plus de la sécurité, du responsive et de la performance, nous obtenons une application quasi native mais en JavaScript ! Pour nous aider à faire tout cela, les services workers, le manifest et d’autres API estampillées W3C sont là.

Formateur SFEIR

Déroulement de la formation

Présentation des participants

Déroulement de la formation

Concepts généraux


Jour 1


A la découverte des concepts PWA

Module: Introduction - 1h

  • 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: Manipulation des Services Workers - 2h

  • 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’

Module: Gestion des stratégies de cache - 2h

  • 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

Bonus : Module: Aller plus loin avec le service worker - 1h

  • 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

Jour 2


Fidélisation de l’utilisateur

Module: Rendre l’ application installable - 2h

  • Présentation du manifest
  • Présentation des enjeux de l’installation d’une PWA
  • Comment rendre une PWA disponible sur les Stores

Ateliers:

  • Création d’un manifest et installation de l’application

Module: Engageons notre utilisateur - 2h

  • 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

Bonus : Module: Intégration à la plateforme - 2h

  • 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

Module: Améliorer la performance de l’application - 1h

  • 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.

Ateliers:

  • Bonus : Mise en place du P.R.P.L pattern
  • Bonus : Module: Tour des outils pouvant nous aider- 1h
  • Liste d’outils pouvant aider à la réalisation d’une PWA CLI Angular, Vue, React, …

Présentation de Workbox

Ateliers: * Audit avec LightHouse CI

Inscription

SFEIR s'engage à protéger et à respecter votre vie privée. Nous n'utiliserons vos données personnelles que pour administrer votre compte et vous fournir les produits et services demandés.

Je comprends et j'accepte

Nous aimerions vous contacter ponctuellement au sujet de nos produits et services, ainsi que d'autres contenus susceptibles de vous intéresser. Si vous consentez à ce que nous vous contactions à cette fin, veuillez cochez la case suivante :

J'accepte de recevoir d'autres communications de SFEIR.

En cliquant sur « Envoyer » ci-dessus, vous autorisez l’entreprise SFEIR à stocker et traiter les données personnelles soumises afin qu’elle vous fournisse le contenu demandé.

SFEIR SCHOOL

Progressive Web Apps 200

du Mardi 9 Juin
au Mercredi 10 Juin

à Strasbourg

Nous avons actuellement 3 façons de faire des applications mobiles : le natif, l’hybride et l’HTML5. Cependant, en survitaminant les applications HTML5 avec quelques nouveaux concepts, nous obtenons les Progressive Web Apps. En ajoutant une allure d’application, un mode offline, la push notification et le fait de pouvoir l’installer en plus de la sécurité, du responsive et de la performance, nous obtenons une application quasi native mais en JavaScript ! Pour nous aider à faire tout cela, les services workers, le manifest et d’autres API estampillées W3C sont là.

Formateur SFEIR

Bruno

Développeur depuis plus de 10 ans et après avoir touché à de nombreuses technos back et front dont Angular JS, Bruno s'est pris d'une grande passion pour Angular depuis sa sortie. Orienté de plus en plus vers Javascript et les technos front, il saura vous transmettre sa passion.

Déroulement de la formation

Présentation des participants

Déroulement de la formation

Concepts généraux


Jour 1


A la découverte des concepts PWA

Module: Introduction - 1h

  • 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: Manipulation des Services Workers - 2h

  • 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’

Module: Gestion des stratégies de cache - 2h

  • 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

Bonus : Module: Aller plus loin avec le service worker - 1h

  • 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

Jour 2


Fidélisation de l’utilisateur

Module: Rendre l’ application installable - 2h

  • Présentation du manifest
  • Présentation des enjeux de l’installation d’une PWA
  • Comment rendre une PWA disponible sur les Stores

Ateliers:

  • Création d’un manifest et installation de l’application

Module: Engageons notre utilisateur - 2h

  • 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

Bonus : Module: Intégration à la plateforme - 2h

  • 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

Module: Améliorer la performance de l’application - 1h

  • 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.

Ateliers:

  • Bonus : Mise en place du P.R.P.L pattern
  • Bonus : Module: Tour des outils pouvant nous aider- 1h
  • Liste d’outils pouvant aider à la réalisation d’une PWA CLI Angular, Vue, React, …

Présentation de Workbox

Ateliers: * Audit avec LightHouse CI

Inscription

SFEIR s'engage à protéger et à respecter votre vie privée. Nous n'utiliserons vos données personnelles que pour administrer votre compte et vous fournir les produits et services demandés.

Je comprends et j'accepte

Nous aimerions vous contacter ponctuellement au sujet de nos produits et services, ainsi que d'autres contenus susceptibles de vous intéresser. Si vous consentez à ce que nous vous contactions à cette fin, veuillez cochez la case suivante :

J'accepte de recevoir d'autres communications de SFEIR.

En cliquant sur « Envoyer » ci-dessus, vous autorisez l’entreprise SFEIR à stocker et traiter les données personnelles soumises afin qu’elle vous fournisse le contenu demandé.

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 Place Albert Camus

44200 Nantes

+33 2 55 59 07 00