Progressive Web Apps

Wojciech Trawiński

YouGov Front-end meeting, 2021

Need for PWAs

What are PWAs?

Websites that took all the right vitamins.

What are PWAs?

Websites that took all the right vitamins.

Capable

What are PWAs?

Websites that took all the right vitamins.

Capable

Reliable

What are PWAs?

Websites that took all the right vitamins.

Capable

Reliable

Installable

What are PWAs?

Websites that took all the right vitamins.

Capable

Reliable

Installable

PWA in action

PWA installation

PWA offline

PWA essentials

Secure contexts (HTTPS)

PWA essentials

Secure contexts (HTTPS)

Service workers

PWA essentials

Secure contexts (HTTPS)

Service workers

Manifest file

PWA in Angular

Starting with version 5.0.0,

Angular ships with a service worker implementation.

PWA in Angular

Starting with version 5.0.0,

Angular ships with a service worker implementation.

Installable, customisable offline support, push notifications.

PWA in Angular

Starting with version 5.0.0,

Angular ships with a service worker implementation.

Installable, customisable offline support, push notifications.

Starting with version 12.1,

customisable notification click behaviour.

PWA in Angular

Starting with version 5.0.0,

Angular ships with a service worker implementation.

Installable, customisable offline support, push notifications.

Starting with version 12.1,

customisable notification click behaviour.

ng add @angular/pwa --project *project-name*

PWA docs

https://web.dev/progressive-web-apps/

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps

https://angular.io/guide/service-worker-intro

https://developers.google.com/web/tools/workbox

https://codelabs.developers.google.com/?cat=web