PWA – Progressive Web Applications
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)
- 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
- 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’
- 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
- 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
- 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
- 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
- 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
- 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
- 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
Ce cours vous intéresse ?
Demandez un devis
offer? Contact us