From Website to Progressive Web App

on YouTube ↗31m

" summary

Starts from an existing React single‑page app and shows concrete steps: add server-side rendering with Express/Gulp to drop first meaningful paint from ~4s to ~870ms and raise the PWA score from 36 to 45; add a precaching service worker via sw-precache/Workbox to serve the app shell and runtime cache data, cutting speed index ~4500→~1300 and PWA score to 64; add a manifest and icons so the app installs on iOS (offline unsupported there); verify with Lighthouse audits and Chrome DevTools.

AI-written summary · about

" chapters (7)

1. 0:00Start
2. 0:54Let's Go on a Journey We'll transform a single page app into a progressive web app.
3. 6:18Lighthouse to establish a baseline
4. 7:02Lighthouse A fantastic tool, but not a destination
5. 12:11Add Server Side Rendering Improve time to first paint & remove JavaScript dependency
6. 17:50Remember Service workers are a progressive enhancement
7. 28:26The Journey Continues Lighthouse can guide you along

" related talks

• 23mBuilding a Progressive Web AppKirupa Chinnathambi · Front-Trends 2017
• 46mIntro to Progressive Web AppsKyle Paul · DevFestMN 2018
• 17mLet's Build a Progressive Web Appuve · DeltaV Conference 2018
• 33mProgressive Web Apps - the Angular waySimona Cotin · Uphill Conf 2018
• 37mIntro to Progressive Web AppsKyle Paul · DevFest Florida 2019
• 51mProgressive Web AppsThomas Steiner · code.talks 2016
• 01h 00mBuilding Progressive Web Apps with ReactJonathan Mills · NDC Porto 2019
• 45mScaling with PWASolomon Ayoola · code.talks commerce 2019