SFEIR Institute, SFEIR InstitutePWA

PWA – Progressive Web Applications

2 days / 14h

Course overview

In 2015, Alex Russell introduced in a famous article the term “Progressive Web App”. It was new approach to Web Apps, at the junction of mobile and web, making it possible to improve the user experience by making the most of new concepts and technologies. Since then, PWAs have become popular and the underlying technologies having become widely supported by browsers. Thus, the “progressive” approach has no longer become a solution among so many others, but an essential methodology for the creation of modern web apps. During the course of this training, you will explore how to use the underlying modern technologies such as workers services, the manifest or the push API, or to make your web app installable, add an offline mode, or even trigger notifications. But beyond all that, this training will focus on how you can apply this complete methodology to your web development in order to obtain powerful, integrated, reliable and engaging applications.

Target audience

  • Understanding and manipulation of the concepts associated with PWAs.
  • Handling PWAs debugging tools


Developers, integrators, software architects, technical project managers

Course Outline

  • This course assumes that you already have the basics of web application programming (ES6).
  • Basic knowledge of Git
  • Front-end development with NPM
  • Install nodejs (LTS): https://nodejs.org/
  • Install git: http://git-scm.com/
  • Your favorite editor (we recommend Visual Studio Code)
  • Install Chrome and at least one other up-to-date browser (Edge, Safari, Firefox)
  1. Introduction
    • Origins of the concept
    • Definition of F.I.R.E.
    • Development and debugging environment
    • Summary of upcoming exercises
    • Security in web applications


  • setting up a PWA development environment
  1. Using Services Workers
    • How do services workers work?
    • Installation of a service worker
    • Understanding the life cycle of a service worker. How to change/impact the lifecycle
    • Using the service worker events: ‘install’, ‘activate’, ‘fetch’


  • Installing a first service worker
  • Debugging a PWA
  • Taking control of events
  • Getting started with the events ‘install’, ‘activate’ and ‘fetch’
  1. Cache policy management
    • Presentation of the concept of App-shell
    • Getting started with the service worker cache API
    • Getting started with cache strategies
    • Getting started with offline mode
    • Workbox overview


  • Setting up an app-shell
  • Making our app available offline
  • Manipulating the cache of a service worker
  • Using workbox to manage the cache
  1. Going further with the service worker
    • Getting started with the ‘message’ event
    • Getting started with the ‘sync’ event


  • Establishing a cross-tab communication based on the ‘message’ event
  • Setting up background-sync for sending messages
  1. Making the app installable
    • Presentation of the manifesto
    • Presentation of the challenges of installing a PWA
    • How to make a PWA available on App Stores


  • Creation of a manifesto and installation of the application
  1. Engaging the user
    • Presentation of UX concepts of user engagement
    • Using the service worker ‘push’ event
    • Getting started with of web notifications
    • How to debug a notification


  • Setting up a notification with Action
  • Setting up a push notification system
  1. Platform integration
    • Discovery of integration possibilities of “Native” APIs: Geolocation, FullScreen
    • Simplified authentication with webAuthN
    • PaymentRequest API
    • List of available APIs
    • Responsive Design


  • Using the geolocation API, fullscreen
  • Setting up a WebAuthN authentication
  1. Improving the performance of the application
    • Reminder on which image formats to use and related techniques
    • Best practices for web performance
    • Presentation of the P.R.P.L. pattern


  • Implementation of the P.R.P.L pattern
  1. A tour of tools that can help
    • List of tools that can help with a PWA
    • CLI Angular, View, React, …
    • Workbox overview


  • Audit with LightHouse CI

Our training sessions

Place of training :
06/05/24 Distance Register
08/07/24 Distance Register
23/09/24 Distance Register
18/11/24 Distance Register
16/12/24 Distance Register

Ce cours vous intéresse ?

Place of training :
Distance Register
Distance Register
Distance Register
Distance Register
Distance Register
Inter : 1200 € HT / user

Funding assistance

Organiser une session de Groupe
Demandez un devis
Organize a dedicated session
for your organization
Does your company need a personalized
offer? Contact us