@angular/service-worker

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));
}