Back to results for “Offline”
Angular › Progressive Web Apps (PWA) with Angular

What is a service worker, and what role does it play in making an Angular app work offline?

Intermediate

Answer

A service worker is a script that runs separately from your app in the background, intercepting network requests and deciding whether to serve a cached response or fetch a fresh one from the network. Angular's built in service worker automatically caches your app's files, letting the app continue loading and functioning even without an internet connection.
// ngsw-config.json controls what the service worker caches
{
  "assetGroups": [
    { "name": "app", "installMode": "prefetch", "resources": { "files": ["/*.js", "/*.css"] } }
  ]
}
Real-world example A field service app used by technicians in areas with poor cell coverage continues to load and display previously fetched job details even when the technician's connection drops entirely, thanks to the Angular service worker caching those resources.

Common follow-ups: How does the service worker decide when to update its cache with a newer version of the app?;What is the difference between the prefetch and lazy installMode options?