Unlocking Progressive Web Applications

on YouTube ↗02h 21m

" summary

Takes a regular site and actually converts it: registers Service Workers, uses Workbox.js, caches routes with explicit strategies (cache‑first, network‑first, stale‑while‑revalidate), and tests with Lighthouse. Shows adaptive images via the Network Information API and Cloudinary URL transforms that shrink a 570KB JPEG to 49KB then to 32KB and down to 6KB (570KB → 6KB). Builds a selfie PWA that stores captures in localStorage, syncs to Firebase when online, and mostly uploads on reconnect; demos run from NodeJS and Chrome.

AI-written summary · about

" chapters (13)

1. 0:00Start
2. 3:01Agenda
3. 4:30What is a progressive web app?
4. 7:02PWA checklist
5. 9:05Why pwa?
6. 10:30Core tech
7. 16:33Service worker
8. 18:16Manifest
9. 19:01Cache
10. 20:03Caching strategies
11. 22:03workbox.js
12. 23:35PWA support in the wild
13. 24:46Adaptive image loading (concept)

" related talks

• 47mProgressive Web AppsChristian Heilmann · Oredev 2017
• 24mPWA for Mobile EngineersMaurizio Mangione · Droidcon Italy 2018
• 27mProgressive what apps?Patrick Kettner · Render Conference 2017
• 35mProgressive Web Apps: trick or real magic?Maurizio Mangione · Universal JS Day 2017
• 45mThe (Awesome) Future of Web AppsJad Joubran · Dutch PHP Conference 2017
• 33mProgressive Web Apps - the Angular waySimona Cotin · Uphill Conf 2018
• 46mKeynote: Progressive Web AppsChristian Heilmann · Mobile Era 2017
• 32mProgressive Web AppsMike Oram · Dutch PHP Conference 2018