Any Site can be a Progressive Web App
A presentation at DeltaV Conference in in London, UK by Jeremy Keith
I have a really hard time describing what a progressive web app actually is.” “ —What the heck is a “Progressive Web App”? Seriously.
A progressive web app is an enhanced version of a Single Page App (SPA) with a native app feel.” “ —Building Progressive Web Apps
Before You Build a PWA You Need a SPA” “ —hackernoon.com
I’ve seen too many devs assume PWA is a subset of SPA. We need to improve our messaging” “ —Jake Archibald
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
! 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
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
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
offline HTTPS Metadata
offline HTTPS Metadata = progressive web app
- web app manifest
- service worker HTTPS
service worker offline
huffduffer.com
huffduffer.com
ampersandconf.com
trivago.com
trivago.com
resilient webdesign.com
adactio.com
adactio.com
ethan marcotte.com
una.im
una.im
una.im
sara soueidan.com
sara soueidan.com
sara soueidan.com
archive. dconstruct.org
archive. dconstruct.org
archive. dconstruct.org
archive. dconstruct.org
Yes, that web project should be a PWA” “ —A List Apart
abookapart.com
There's a common misconception that making a Progressive Web App means creating a Single Page App with an app-shell architecture. But the truth is that literally any website can benefit from the performance boost that results from the combination of HTTPS + Service Worker + Web App Manifest.
for free. You
can too.
Resources
The following resources were mentioned during the presentation or are useful additional information.
-
What the heck is a “Progressive Web App”? Seriously.
Ben Halpern
-
Building Progressive Web Apps
Diogo Cunha, Near Form
-
Before You Build a PWA You Need a SPA”
Mark Muskardin
-
Jake Archibald on Twitter
I’ve seen too many devs assume PWA is a subset of SPA. We need to improve our messaging
-
What is a PWA
Salva de la Puente
-
Naming Progressive Web Apps
Frances Berriman
-
Progressive Web App checklist
-
Huffduffer
An example of a progressive web app.
-
Ampersand 2018
An example of a progressive web app.
-
Trivago
An example of a progressive web app.
-
Resilient Web Design
An example of a progressive web app.
-
adactio
An example of a progressive web app.
-
Ethan Marcotte
An example of a progressive web app.
-
Una Kravets
An example of a progressive web app.
-
Sara Soueidan
An example of a progressive web app.
-
dConstruct Archive
An example of a progressive web app.
-
Yes, that web project should be a PWA
Aaron Gustafson
-
Going Offline
A Book Apart.
Buzz and feedback
Here’s what was said about this presentation on social media.
