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