Bulding (Progressive) Web Apps
summary
Builds a movie PWA that passes Lighthouse by adding a service worker for caching, a web app manifest for installability and splash screens, and server rendering via Puppeteer or framework tools to cut JS costs. Demonstrates tooling: ng add @angular/pwa, Create React App and Vue CLI defaults, and using workbox for cache strategies. Shows the surprise size gap of 250 MB vs 250 KB between native and PWA Twitter installs and links the demo at pwa.ottaotta.dev.
AI-written summary · about
chapters (9)
- 0:00Progressive Web Apps intro
- 2:21What defines a PWA
- 3:45Why users prefer PWAs
- 8:26Testing PWA with Lighthouse
- 13:02Reliable PWAs with service workers
- 17:14Optimizing PWA performance
- 19:18Server-side rendering for PWAs
- 20:43Engaging and installable PWAs
- 23:57Final Lighthouse test & PWA checklist
related talks
23mBuilding a Progressive Web App
17mLet's Build a Progressive Web App
22mPWA Every Day Progressive Web Apps vs Native Apps
01h 02mService Workers: Transforming your App into a Progressive Web Application
47mProgressive Web Apps
33mProgressive Web Apps - the Angular way
49mIntro To Progressive Web Apps
27mProgressive what apps?