#iemeetup #pwa
Introducing PWAs
Internet Explorers / July 2017


What are PWAs

“Progressive Web Apps are experiences that combine the best of the web and the best of apps”

Defining the Progressive part


Remember the strategy

Progressive enhancement

...provide an experience everyone can use

extra presentation and functionality can be layered on


the Web part


the App part

We're spending more time using

native Apps



  • Performance
  • Engagement
  • Homescreen access
  • Installable/works offline

We can do this on the web!


PWAs must be served from a secure origin

Load in under 3 seconds

  • Optimise every byte of your website
  • Adapt for Low Bandwidth and High Latency
  • Switch to HTTP/2

Engage the user

  • Prompt install on user's home screen
  • Web push notifications, e.g. alerts/news
  • Links into native UI, e.g. payments request API
  • Fresh content


Information about an application for quicker access and a richer experience


Be a good website!

  • Discoverable
  • Accessible
  • Responsive
  • Pages have a URL
  • Supports all/most browsers and devices


Service Workers

Enable PWAs to load instantly
..regardless of the network state

Phone offline
Phone offline

SW Cache management

Puts you in control


Background Sync

Queue data to send when offline

Introducing Background Sync, Jake Archibald

A Service Worker to progressively enhance a blog by storing assets in a cache, and keeping limited caches of pages and images for offline browsing.

Service Worker example by Jeremy Keith
Lighthouse (Chrome/node module/command line)

Should I build a SPA?

(Single Page Application)

Instant page transitions!


Progressive Web Sites

Designing a PWA

“designing responsive Progressive Web Apps is more difficult than people realize”

Let's NOT make PWAs the
next mobile web/
platform-specific websites

The Next Step in Responsive Web Design
thank you
calumryan.com / @calum_ryan