Progressive Web Apps (PWA)

Work with progressive web apps

Description

In the latest statistics published on the use of the web, the majority was done on a smartphone. This causes possible problems of connections, performance or user experience. The different specifications behind the term "Progressive Webapps", will allow us to develop a web application whose user experience is as good as a native application.

Objectives

  • Know the concepts of Progressive Web Apps
  • Know how to optimize an application
  • Improve the user experience of your application
  • Master the new concepts of Web development: Service Worker, Web Worker, IndexDB, ...

Prerequisites

  • JavaScript, NodeJS Ecosystem

Programme

Introduction

  • Concepts
  • Use case
  • Examples

Manifest Web App

HTTPS protocol

Web App Install Banner

IndexedDB

Service Worker

  • Life cycle
  • Use
  • Cache Strategy
  • API cache
  • Fetch API

Web Worker

Push Notification

Shell App

Optimizing your application

  • PRPL Pattern
  • Webpack
  • Splitting code
  • Tree Shaking

Other APIs: Vibration, Battery, ...

Tooling

  • Chrome Dev Tools
  • Workbox
  • Lighthouse
  • Testing