PWA – Progressive Web Applications
Solid foundations for developing progressive web applications.
What you will learn
- Understand PWA concepts and their development environment
- Master Service Workers for offline capabilities and event handling
- Implement caching strategies for performance and offline access
- Use advanced Service Worker features like push notifications and background sync
- Make an application installable with a Web App Manifest
- Integrate with native platform features (Geolocation, Notifications)
- Improve application performance using best practices (PRPL pattern)
Prerequisites
- Basics of web application programming (ES6)
- Basic knowledge of Git
- Experience in front-end development with NPM
- Have nodejs (LTS), git, a code editor (VS Code recommended), and up-to-date browsers (Chrome, Edge, Safari, Firefox) installed
Target audience
- Developers, Integrators, Software architects, Technical project managers
Training Program
9 modules to master the fundamentals
Topics covered
- →Origins of the concept
- →Definition of the F.I.R.E. acronym
- →Development and debugging environment
- →Overview of upcoming exercises
- →Web application security overview
Activities
Setting up a PWA development environment
Topics covered
- →How service workers operate
- →Installing a service worker
- →Understanding the service worker lifecycle and how to act on it
- →Handling service worker events: 'install', 'activate', 'fetch'
Activities
Install a first service worker
Debugging a PWA
Taking control of events
Discovering 'install', 'activate', and 'fetch' events
Topics covered
- →Presentation of the App-shell concept
- →Discovering the service worker cache API
- →Discovering cache strategies
- →Discovering offline mode
- →Presentation of Workbox
Activities
Set up an app-shell
Make our application available offline
Manipulate the cache of a service worker
Using Workbox to manage its cache
Topics covered
- →Discovering the 'message' event
- →Discovering the 'sync' event
Activities
Setting up cross-tab communication based on the 'message' event
Setting up background-sync for sending messages
Topics covered
- →Presentation of the manifest
- →Challenges of installing a PWA
- →How to make a PWA available on the Stores
Activities
Creating a manifest and installing the application
Topics covered
- →Presentation of user engagement UX concepts
- →Using the 'push' event of the service worker
- →Discovering web notifications
- →How to debug a notification
Activities
Setting up a notification with Action
Setting up a Push notification system
Topics covered
- →Discovering integration possibilities with 'Native' APIs: Geolocation, FullScreen
- →Simplified authentication with WebAuthN
- →PaymentRequest API
- →List of available APIs
- →Responsive Design
Activities
Using the geolocation and fullscreen API
Setting up WebAuthN authentication
Topics covered
- →Review of image formats to use and associated techniques
- →Web performance best practices
- →Presentation of the P.R.P.L. pattern
Activities
Implementing the P.R.P.L pattern
Topics covered
- →List of tools that can help in creating a PWA
- →Angular, Vue, React CLIs, ...
- →Presentation of Workbox
Activities
Audit with LightHouse CI
Quality Process
SFEIR Institute's commitment: an excellence approach to ensure the quality and success of all our training programs. Learn more about our quality approach
- Lectures / Theoretical Slides — Presentation of concepts using visual aids (PowerPoint, PDF).
- Technical Demonstration (Demos) — The instructor performs a task or procedure while students observe.
- Guided Labs — Guided practical exercises on software, hardware, or technical environments.
The achievement of training objectives is evaluated at multiple levels to ensure quality:
- Continuous Knowledge Assessment : Verification of knowledge throughout the training via participatory methods (quizzes, practical exercises, case studies) under instructor supervision.
- Progress Measurement : Comparative self-assessment system including an initial diagnostic to determine the starting level, followed by a final evaluation to validate skills development.
- Quality Evaluation : End-of-session satisfaction questionnaire to measure the relevance and effectiveness of the training as perceived by participants.
Train multiple employees
- Volume discounts (multiple seats)
- Private or custom session
- On-site or remote