Progressive Web Apps



photo of Nolan Lawson

What is a
"progressive web app"?

Nebulous term, somewhat like:

  • Ajax
  • Responsive
  • Mobile-first
  • etc.

Coined by Alex Russell of Google

Alex Russell

What makes a progressive web app?

  • Native-like characteristics
  • Promoted by browser chrome

Native-like characteristics

  • Works offline
  • Launches from home screen
  • Hides URL bar
  • Branded colors
  • "First class" treatment in OS
  • Push notifications (optional)
  • Background sync (optional)

Hamster break

Promoted by browser chrome

  • "Add to home screen?" popup




The install banner is a carrot

How do we eat that sweet, sweet carrot?

Requirements for the install banner

  • Web Manifest file
    • short_name
    • URL
    • PNG icon
  • Service Worker

Web App Manifest

Say goodbye to this garbage

Web Manifest file

<!-- ... -->
  <link rel="manifest" href="manifest.json">
<!-- ... -->

Manifest JSON file

  "short_name":       "",
  "name":             "",
  "display":          "standalone",
  "start_url":        "index.html?launcher=true",
  "theme_color":      "#a040a0",
  "background_color": "#EEEEEE",
  "icons": [
    { "src": "img/icon-48.png",  "sizes": "48x48",   "type": "image/png" },
    { "src": "img/icon-96.png",  "sizes": "96x96",   "type": "image/png" },
    { "src": "img/icon-144.png", "sizes": "144x144", "type": "image/png" },
    { "src": "img/icon-196.png", "sizes": "196x196", "type": "image/png" }

Service Worker

Bad old days: App Cache

# rev 2016-04-28 08:44:48 -0400



Service Worker in a nutshell

  • Web Worker on steroids
  • Process/security of Shared Worker
  • Programmable client-side proxy
  • HTTPS required (except localhost)

Web Workers vs Service Workers

Types of workers
Source: Blink report on workers

Useful SW tools

  • sw-precache
  • sw-toolbox
  • offline-plugin (webpack)
  • UpUp

Hamster break

Soft requirements for PWAs

  • Theme color
  • App shell
  • IndexedDB
  • 60FPS animations

Theme color

<!-- ... -->
  <meta name=theme-color content=#a040a0>
<!-- ... -->

Dynamic theme color

var meta = document.head.querySelector('meta[name="theme-color"]');
meta.content = '#4169E1';

App Shell


  • Progressive rendering
  • Progressive enhancement
  • Not showing a blank screen w/o JS


  • Server-side HTML
    • React
    • Ember Fastboot
    • Hyperscript (virtual-dom)
    • etc.
  • Turn off JS to see effect
  • Load in 2G to see progressive loading

IndexedDB/WebSQL for data storage

Pokédex IDB

4.0M Chrome / 5.6M Firefox

Why IDB + WebSQL?

IndexedDB libraries

  • LocalForage
  • PouchDB
  • Dexie
  • YDN-DB
  • indexeddb-promised

Extra credit: web workers

  • IDB is fast, but blocks the DOM
  • Web Workers mitigate this
  • No IDB+WW in Safari; use pseudo-worker

60FPS animations

Only use hardware-accelerated:

  • transform
  • opacity

FLIP animations

  • Flexibility of JS, performance of CSS
  • Technique, not a library
  • First - Last - Invert - Play

See the Pen FLIP animations demo by Nolan Lawson (@nolanlawson) on CodePen.

OK, so what's the browser support?

Browser support

Progressive apps are progressive

And that's okay