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
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.
The following resources were mentioned during the presentation or are useful additional information.
Ben Halpern
Diogo Cunha, Near Form
Mark Muskardin
I’ve seen too many devs assume PWA is a subset of SPA. We need to improve our messaging
Salva de la Puente
Frances Berriman
An example of a progressive web app.
An example of a progressive web app.
An example of a progressive web app.
An example of a progressive web app.
An example of a progressive web app.
An example of a progressive web app.
An example of a progressive web app.
An example of a progressive web app.
An example of a progressive web app.
Aaron Gustafson
A Book Apart.
Here’s what was said about this presentation on social media.
@adactio kicking off his talk on PWA with a shoutout to @uveavanto diplomacy about the term 🙌 pic.twitter.com/fxghxiT9M6
— DeltaV Conference (@deltavconf) May 11, 2018
The wonderful @adactio has just 10 mins to explain why he believes that any site can be a progressive web app... he’s pretty convincing so far! #deltaVconf #perfmatters #webperf pic.twitter.com/Q1sznLEjaL
— Jo Lankester (@josnow) May 11, 2018
After one load, https://t.co/Zvmzw10F61 is already installed. You have the whole book.https://t.co/OXzx1uHvdO will save any pages you've already looked at.https://t.co/nDbJ1yWMcS offers a separate "Download for Offline" experience.
— Chris Ashton (@ChrisBAshton) May 11, 2018
~@adactio, #DeltaVConf
At the very least provide a custom offline page but you can do so much more, from @adactio #DeltaVConf pic.twitter.com/ltFSdznZLV
— stuart mcmillan (@mcmillanstu) May 11, 2018
"If you're interested in how to implement PWAs, I've written a book: 'Going Offline' - available at https://t.co/ycvd6OYsuy".
— Chris Ashton (@ChrisBAshton) May 11, 2018
~@adactio, #DeltaVConf
.@adactio explains what the term #pwa is #DeltaVConf pic.twitter.com/0PeCK16hYE
— Dan Shappir (@DanShappir) May 11, 2018
@adactio on PWAs, or as I call them “websites” #DeltaVConf pic.twitter.com/PFoXJZtbPS
— stuart mcmillan (@mcmillanstu) May 11, 2018
Excellent lightning talk from @adactio on “what is a PWA anyway?” It’s a website. A progressively enhanced, resiliently built website. But still a website. #DeltaVConf
— Garrett Coakley (@garrettc) May 11, 2018
for free. You
can too.