#iemeetup #pwa
@calum_ryan
Flower
Introducing PWAs
@calum_ryan
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

?

Why

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

We can do this on the web!

HTTPS

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
Homescreen

manifest.json

Information about an application for quicker access and a richer experience

CODE

Be a good website!

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

Offline

Service Workers

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

Phone offline
Phone offline

SW Cache management

Puts you in control

CODE

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
Flower
thank you
calumryan.com / @calum_ryan