@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

18.2.8 (2024-10-10)

compiler

| Commit | Type | Description | | -- | -- | -- | | 11692c8dab | fix | add multiple :host and nested selectors support (#57796) | | 66dcc691f5 | fix | allow combinators inside pseudo selectors (#57796) | | 48a1437e77 | fix | fix comment typo (#57796) | | d325f9b55f | fix | fix parsing of the :host-context with pseudo selectors (#57796) | | aea747ab3b | fix | preserve attributes attached to :host selector (#57796) | | 21be258be6 | fix | scope :host-context inside pseudo selectors, do not decrease specificity (#57796) | | 7a6fd427d5 | fix | transform pseudo selectors correctly for the encapsulated view (#57796) |

compiler-cli

| Commit | Type | Description | | -- | -- | -- | | f187c3abf8 | fix | defer symbols only used in types (#58104) |

core

| Commit | Type | Description | | -- | -- | -- | | 46bafb0b0a | fix | clean up afterRender after it is executed (#58119) |

platform-server

| Commit | Type | Description | | -- | -- | -- | | b40875a2cc | fix | destroy PlatformRef when error happens during the bootstrap() phase (#58112) (#58135) |

<!-- CHANGELOG SPLIT MARKER -->

<a name="19.0.0-next.8"></a>