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 👎

Responsive - as developers we don't need to build different apps for iOS and Android and Windows phone, but only one responsive website is enough. Linkable - as in: it has a URL. Easier to share with others, but what's probably even more important is that search engines can find it and index it. No app stores - from a user perspective it's great because they don't need to download the app but they can just start using it straight away - from a developer perspective we don't need to submit it to the app store and go through approval process but can iterate really quickly. Browser support - there is one big downside at the moment, as with any new shiny front end web technology... and that is browser support. At the moment only on Chrome for Android and Opera for Android. Firefox for Android it's in beta. MS Edge: under development and Webkit: under consideration. Which means for iPhone users: forget it. (For now.) Webkit is a layout engine in browsers. Powers Safari. Chromium based browsers are Chrome and Opera, it's a fork of Webkit. Complexity - as you will see later, the caching strategies can get quite complex.

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

Enhanced online experience - by controlling the caching of content, so that it doesn't need to download certain files every time (for example stylesheets or javascript) - pre-service worker there was (and still is) something called AppCache. Works in all browsers but Chrome, Firefox are planning to stop support for it. There were issues with it e.g. AppCache can't be partially updated, there were security issues with it and usability problems. Offline experience - you can define what happens when a user tries to use your site or app without a network connection. For example you could have an offline fallback page (the Guardian developer blog has a crossword puzzle) Background data synchronisation - service worker can be started up even when the user isn't on the website, so it can update its cache. - but from what I've read this capability is not available yet

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?

- Addy Osmani

XKCD knows it

Characteristics of a PWA

Characteristics of a PWA

Pros and Cons

How is it all done?

Web app manifest

Let's look at a real life manifest file.

Service Worker

And why would you use it?

You could use it to...

Demo time!

Examples of live apps

Any questions?

Thank you!