Angular and Service Workers

on YouTube ↗33m

" summary

Angular IO uses Service Workers to serve a production build offline and hit a Lighthouse 100 PWA benchmark by registering a generated ngsw-manifest and shipping the package @angular/service-worker. The lifecycle is install → activate → fetch; install precaches static files, fetch uses cache-first with network fallback (clone streams before caching), and activate cleans old caches. Angular CLI flips service worker on in angular.json, supports external assets, route redirection for SPA routes, and configurable dynamic caching strategies.

AI-written summary · about

" chapters (8)

1. 0:00Introduction and speaker intro
2. 2:11Angular and service workers overview
3. 7:28Service worker fundamentals
4. 17:47Service worker lifecycle and caching
5. 21:16Angular service worker features
6. 25:37Demo of offline Angular app
7. 30:58Dynamic content and routing
8. 32:04Q&A and acknowledgments

" related talks

• 36mAngular and Service WorkersPascal Precht · AngularCamp 2017
• 24mBuild progressive web apps with AngularSimona Cotin · Frontend Developer Love 2018
• 54mBuilding an Angular PWA: Angular Service Worker or Workbox?Maxim Salnikov · iJS 2018 Spring
• 43mAutomatic Progressive Web Apps using the Angular Mobile ToolkitMaxim Salnikov · JSHeroes 2017
• 32mBuilding an Angular PWA Angular Service Worker or Workbox?Maxim Salnikov · Angular Connect 2018
• 37mAngular PWA: crafting apps that adapt anywhereSoumaya Erradi · angularday 2024
• 22mAutomatic Progressive Web Apps using Angular Service WorkerMaxim Salnikov · AngularConnect 2017
• 41mPerformant and Accessible Angular Apps as PWAsPatricio Vargas · Connect.Tech 2021