Advanced PWA patterns

on YouTube ↗09m

" summary

Four concrete patterns using Workbox and browser APIs: resilient search uses Background Sync with a queue and onSync callback plus web push to retry failed search requests and notify users; adaptive loading uses the Network Information API and an adaptiveLoadingPlugin (requestWillFetch) to swap lower-quality images or AMP on slow connections; instant navigation prefetching via link prefetch (five‑minute cache) and StaleWhileRevalidate gains (MercadoLibre/Terra cite 78% faster navigations and 45% more impressions); app-shell composes cached header/footer with a network‑first content stream to paint fast.

AI-written summary · about

" chapters (5)

1. 0:00Introduction
2. 0:35Resilience Search Experiences
3. 2:38Adaptive Loading
4. 4:42Instant Navigation Experiences
5. 7:11App Shell UX

" related talks

• 36mPWA underhood: what makes it so progressiveSergiy Babich · FrontEnd Con 2018
• 29mProgressive Web Apps: What, Why and How?Sam Dutton, Sarah Clark · Google Developer Days India 2017
• 51mPWA ChallengesJason Grigsby · performance.now() 2018
• 55mPWA Fundamentals: websites with superpowersRowdy Raubow · JS Fest 2019 Autumn
• 45mScaling with PWASolomon Ayoola · code.talks commerce 2019
• 24mPWA for Mobile EngineersMaurizio Mangione · Droidcon Italy 2018
• 41mProgressive WebAda Rose Edwards · ffconf 2016
• 33mBuilding apps that are on FIREMariko Kosaka · View Source 2017