Free tools Windows power users keep installed
One-click scans. No signup required.
An Angular service worker is a script that runs in the browser, intercepts your app’s requests, and answers them from a cache when it can. That cuts network dependence and lets an app load on slow or absent connections. It is one step toward a Progressive Web App (PWA), not the whole thing. Angular itself describes it as a “basic caching utility for simple offline support with a limited featureset” and points to native browser APIs for more advanced caching and offline needs.
Enable it with the CLI schematic
In an Angular CLI project, run:
ng add @angular/pwaAccording to Angular’s getting started guide, the schematic:
As an Amazon Associate I earn from qualifying purchases.
- adds the
@angular/service-workerpackage; - enables service worker build support in the CLI;
- registers the worker in the app;
- links the web app manifest and adds theme-color metadata and icons;
- creates the
ngsw-config.jsonconfiguration file.
Open the generated ngsw-config.json afterwards. Its default file and extension patterns may not match your project’s real output paths and assets, so adjust them.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Requirements and fallback behavior
- HTTPS: service workers need a secure context. Localhost is the development exception.
- Browser support: in unsupported browsers, Angular’s worker caching and push features are unavailable. The app must keep working without the worker, and you should check whether the worker is enabled before calling its APIs.
- Registration timing: by default the worker waits until the app stabilizes, for up to 30 seconds, so it doesn’t compete with initial rendering (Angular docs).
Source: Angular service worker overview.
Configure caching in ngsw-config.json
Angular’s configuration file separates two jobs.
Asset groups: your build output
Asset groups list the files produced by your build, such as scripts, styles and images. They are the app’s shell, cached and versioned together.
#1 Best Overall
Data groups: runtime data
Data groups use URL patterns to cache runtime requests such as API responses. Only non-mutating GET and HEAD requests are cached. Because the first matching group handles a request, put more specific patterns before broader ones.
Choosing a strategy
| Strategy | Behavior | Angular’s suggested fit |
|---|---|---|
performance |
Favors the cache for speed; may return stale data up to the configured maxAge |
Rarely changing resources such as avatars |
freshness |
Prefers the network; falls back to cache when the configured timeout expires | Fast-changing values such as account balances |
These examples come from Angular’s documentation; they are illustrations, not universal rules. Decide per endpoint how stale is acceptable, and how long you will wait for the network before using the cache.
How updates work
The worker reads a generated ngsw.json manifest that lists resources and their hashes. A deployed version is downloaded and cached as a unit, so an already-open tab doesn’t end up mixing files from two versions (Angular devops guide).
If a file’s hash doesn’t match the manifest, Angular can stop serving the suspect cached version and fall back to a network “safe mode.” Typical causes are:
Rank #3
- a CDN or other intermediary serving stale files;
- non-atomic publishing, where the manifest and files reach production at different times;
- inconsistent build artifacts.
Publish each release as a complete, consistent set, and check how your cache layers treat the manifest and the files it references.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Controlling updates and push from code
SwUpdate
The SwUpdate service reports available and installed versions, can check for updates on demand, and can activate the latest version for the current tab. A common pattern is to tell users a new version is ready and let them reload.
SwPush
SwPush handles push interactions. It needs browser support and a valid payload sent from your server. Chrome DevTools can send a test payload locally, which is useful before your backend is ready. Details are in Angular’s push notifications and communications guides.
Quick Recap
Limits to plan around
- The worker is a simple caching layer, not a general offline framework. Needs like background sync or custom caching logic call for native browser APIs.
- Mutating requests (POST, PUT and so on) are not cached by data groups, so offline writes need your own design.
- Caching adds a deployment concern: a bad release can persist in users’ caches unless your publishing and manifest handling are consistent.
The Bottom Line
“”
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
