Any Site can be a Progressive Web App

A presentation at DeltaV Conference in May 2018 in London, UK by Jeremy Keith

Slide 1

Slide 1

I have a really hard time describing what a progressive web app actually is.” “ —What the heck is a “Progressive Web App”? Seriously.

Slide 2

Slide 2

A progressive web app is an enhanced version of a Single Page App (SPA) with a native app feel.” “ —Building Progressive Web Apps

Slide 3

Slide 3

Before You Build a PWA You Need a SPA” “ —hackernoon.com

Slide 4

Slide 4

I’ve seen too many devs assume PWA is a subset of SPA. We need to improve our messaging” “ —Jake Archibald

Slide 5

Slide 5

A Progressive Web App is a regular website following a progressive enhancement strateg y to deli v er native-like user experiences by using modern Web standards.” “ —What is a PWA

Slide 6

Slide 6

! e name isn’t for you and worrying about it is distraction " om just building things that work better for everyone. … It’s marketing, just like HTML5 had very little to do with actual HTML.” “ —Naming Progressive Web Apps

Slide 7

Slide 7

Metadata provided for Add to Home screen All app URLs load while offline Site is served over HTTPS Pages are responsive First load fast even on 3G Site works cross-browser Each page has a URL Page transitions don’t block on the network

Slide 8

Slide 8

Metadata provided for Add to Home screen All app URLs load while offline Site is served over HTTPS Pages are responsive First load fast even on 3G Site works cross-browser Each page has a URL Page transitions don’t block on the network

Slide 9

Slide 9

offline HTTPS Metadata

Slide 10

Slide 10

offline HTTPS Metadata = progressive web app

  • web app manifest
  • service worker HTTPS

Slide 11

Slide 11

service worker offline

Slide 12

Slide 12

huffduffer.com

Slide 13

Slide 13

huffduffer.com

Slide 14

Slide 14

ampersandconf.com

Slide 15

Slide 15

trivago.com

Slide 16

Slide 16

trivago.com

Slide 17

Slide 17

resilient webdesign.com

Slide 18

Slide 18

adactio.com

Slide 19

Slide 19

adactio.com

Slide 20

Slide 20

ethan marcotte.com

Slide 21

Slide 21

una.im

Slide 22

Slide 22

una.im

Slide 23

Slide 23

una.im

Slide 24

Slide 24

sara soueidan.com

Slide 25

Slide 25

sara soueidan.com

Slide 26

Slide 26

sara soueidan.com

Slide 27

Slide 27

archive. dconstruct.org

Slide 28

Slide 28

archive. dconstruct.org

Slide 29

Slide 29

archive. dconstruct.org

Slide 30

Slide 30

archive. dconstruct.org

Slide 31

Slide 31

Yes, that web project should be a PWA” “ —A List Apart

Slide 32

Slide 32

abookapart.com