@angular/service-worker

What is @angular/service-worker?

@angular/service-worker is an Angular package that provides support for service workers in Angular applications. It allows you to leverage the power of service workers to enable features like offline capabilities, background data synchronization, and push notifications in your Angular applications.

What are @angular/service-worker's main functionalities?

Offline Capabilities

This feature allows your Angular application to work offline by caching resources. The ServiceWorkerModule is registered with the service worker script 'ngsw-worker.js', and it is enabled based on the environment configuration.

import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Background Data Synchronization

This feature allows your application to synchronize data in the background. The SwUpdate service is used to check for updates and prompt the user to reload the application when a new version is available.

import { SwUpdate } from '@angular/service-worker';

constructor(private updates: SwUpdate) {
  this.updates.available.subscribe(event => {
    if (confirm('New version available. Load New Version?')) {
      window.location.reload();
    }
  });
}

Push Notifications

This feature allows your application to receive push notifications. The SwPush service is used to request a subscription to push notifications using a VAPID key.

import { SwPush } from '@angular/service-worker';

constructor(private swPush: SwPush) {
  this.swPush.requestSubscription({
    serverPublicKey: 'YOUR_PUBLIC_VAPID_KEY'
  }).then(subscription => {
    // Send subscription to the server
  }).catch(err => console.error('Could not subscribe to notifications', err));
}

Other packages similar to @angular/service-worker

workbox-sw

Workbox is a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build Progressive Web Apps. Compared to @angular/service-worker, Workbox provides more flexibility and is framework-agnostic, making it suitable for a wider range of projects beyond Angular.

sw-precache

sw-precache is a library for generating service worker code that precaches resources to make your web app work offline. It is less integrated with specific frameworks like Angular but offers a straightforward way to implement service workers in any web application.

sw-toolbox

sw-toolbox provides a set of tools for handling network requests with service workers. It is more focused on runtime caching strategies compared to @angular/service-worker, which offers a more comprehensive solution for Angular applications.

README

Angular

The sources for this package are in the main Angular repo. Please file issues and pull requests against that repo.

Usage information and reference details can be found in Angular documentation.

License: MIT

Changelog

20.0.5 (2025-06-25)

compiler-cli

| Commit | Type | Description | | -- | -- | -- | | de0d525ad7 | fix | add suggestion when pipe is missing (#62146) | | 3eb5a79a83 | fix | handle initializer APIs wrapped in type casts (#62203) |

core

| Commit | Type | Description | | -- | -- | -- | | a2e6f317a7 | fix | allow to set a resource in an error state (#62253) | | 4c00238a69 | fix | avoid injecting ErrorHandler from a destroyed injector (#61886) | | 369f03ad7f | fix | unable to retrieve defer blocks in tests when component injects ViewContainerRef (#62156) |

router

| Commit | Type | Description | | -- | -- | -- | | 65c59dd796 | fix | handle scrollRestoration error in restricted environments (#62186) |

upgrade

| Commit | Type | Description | | -- | -- | -- | | 144c429230 | fix | Make zoneless work with hybrid apps (#61660) |

<!-- CHANGELOG SPLIT MARKER -->

<a name="20.1.0-next.2"></a>