PWA - Progressive Web Applications

2 days (14 hours)

Webinar gratuit

9 Juillet 2020

Migration vers Google Cloud

Inscrivez-vous gratuitement

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.

Learning outcomes

This course teaches participants the following skills:

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

Prerequisites

To get the most out of this course, participants should have:

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

Target audience

This course is intended for the following participants:

Developers, integrators, software architects, technical project managers

Course Outline

  1. Introduction
  2. Origins of the concept
  3. Definition of F.I.R.E.
  4. Development and debugging environment
  5. Summary of upcoming exercises
  6. Security in web applications

Workshop: - setting up a PWA development environment

  1. Using Services Workers
  2. How do services workers work?
  3. Installation of a service worker
  4. Understanding the life cycle of a service worker. How to change/impact the lifecycle
  5. 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
  2. Presentation of the concept of App-shell
  3. Getting started with the service worker cache API
  4. Getting started with cache strategies
  5. Getting started with offline mode
  6. 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
  2. Getting started with the ‘message’ event
  3. 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
  2. Presentation of the manifesto
  3. Presentation of the challenges of installing a PWA
  4. How to make a PWA available on App Stores

Workshop: - Creation of a manifesto and installation of the application

  1. Engaging the user
  2. Presentation of UX concepts of user engagement
  3. Using the service worker ‘push’ event
  4. Getting started with of web notifications
  5. How to debug a notification

Workshops: - Setting up a notification with Action - Setting up a push notification system

  1. Platform integration
  2. Discovery of integration possibilities of “Native” APIs: Geolocation, FullScreen
  3. Simplified authentication with webAuthN
  4. PaymentRequest API
  5. List of available APIs
  6. Responsive Design

Workshops: - Using the geolocation API, fullscreen - Setting up a WebAuthN authentication

  1. Improving the performance of the application
  2. Reminder on which image formats to use and related techniques
  3. Best practices for web performance
  4. 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
  2. List of tools that can help with a PWA
  3. CLI Angular, View, React, …
  4. Workbox overview

Workshop: - Audit with LightHouse CI

€1200 ex. VAT

Contact us

You can unsubscribe from our communications at any time.

In order to take into account your request, we must store and process your personal data. If you authorize us to store your personal data for this purpose, check the box below.

By clicking on « Send » below, you authorize SFEIR to store and process the personal data submitted above so that it can provide you with the requested content.