SFEIR InstitutePWA

PWA – Progressive Web Applications

2 day(s) / 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

Prerequisites

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

Workshop:

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

Workshops:

  • 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

Workshops:

  • 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

Workshops:

  • 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

Workshop:

  • 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

Workshops:

  • 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

Workshops:

  • 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

Workshop:

  • 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

Workshop:

  • Audit with LightHouse CI

Our training sessions

Place of training :
Dates
18/01/23 Distance Register
22/02/23 Distance Register
22/03/23 Distance Register
19/04/23 Distance Register
24/05/23 Distance Register
21/06/23 Distance Register
19/07/23 Distance Register
23/08/23 Distance Register
20/09/23 Distance Register
18/10/23 Distance Register
22/11/23 Distance Register
20/12/23 Distance Register

Ce cours vous intéresse ?

Place of training :
Dates
18/01/23 Distance Register
22/02/23 Distance Register
22/03/23 Distance Register
19/04/23 Distance Register
24/05/23 Distance Register
21/06/23 Distance Register
19/07/23 Distance Register
23/08/23 Distance Register
20/09/23 Distance Register
18/10/23 Distance Register
22/11/23 Distance Register
20/12/23 Distance Register
1
Inter : 1200 € HT / user

Funding assistance

Organize a dedicated session
for your organization
Does your company need a personalized
offer? Contact us