An Introduction to Progressive Web Apps

and Manifests and Service Workers

with demo! 💥

Rabea Gleissner

Software developer at

@aebaR on Twitter

What are Progressive Web Apps?

"Progressive Web Apps use modern web capabilities to deliver an app-like user experience.

They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web's low friction at every moment."

- Addy Osmani

XKCD knows it

Characteristics of a PWA

Homescreen access

Full-screen mode

Characteristics of a PWA

Add to the homescreen

Full-screen mode

Splash screen

Push notifications

Exists in app switcher

Works offline! 👯

Pros and Cons

Responsiveness 👍

Linkable 👍

No app stores 👍

Browser support 👎

Complexity 👎

How is it all done?

Web app manifest

Service worker

Web app manifest


  "name": "8th Light",
  "short_name": "8L",
  "start_url": ".",
  "display": "fullscreen",
  "background_color": "white",
  "description": "We craft software that is beautiful,
   durable and shows pride in our worksmanship.",
  "dir": "ltr",
  "lang": "en-GB",
  "orientation": "portrait",
  "scope": "/myapp/",
  "icons": [{
  "src": "images/touch/homescreen48.png",
  "sizes": "48x48",
  "type": "image/png"
  }, {
  "src": "images/touch/homescreen72.png",
  "sizes": "72x72",
  "type": "image/png"
  }, {
  "src": "images/touch/homescreen144.png",
  "sizes": "144x144",
  "type": "image/png"
  }, {
  "src": "images/touch/homescreen192.png",
  "sizes": "192x192",
  "type": "image/png"

Let's look at a real life manifest file.

Service Worker

- a background script run by the browser

- a proxy between your client application and the network

- it can manage a cache of responses

- only works over HTTPS

And why would you use it?

You could use it to...

- enhance online performance

- enable offline browsing

- send push notifications

- allow background data synchronisation

Demo time!

Examples of live apps

  • Washington Post
  • Financial Times
  • Flipboard
  • More at:

Any questions?

Thank you!