Angular module and standalone provider setup for service worker integration with configurable registration strategies and initialization options.
NgModule that provides service worker functionality and dependency injection setup.
/**
* NgModule for Angular service worker functionality
* Provides SwPush and SwUpdate services
*/
@NgModule({providers: [SwPush, SwUpdate]})
class ServiceWorkerModule {
/**
* Register the given Angular Service Worker script with options
* @param script - Path to the service worker script file
* @param options - Registration options including enablement and strategies (default: {})
* @returns ModuleWithProviders for import in NgModule
*/
static register(
script: string,
options: SwRegistrationOptions = {}
): ModuleWithProviders<ServiceWorkerModule>;
}Usage Examples:
import { NgModule, isDevMode } from '@angular/core';
import { ServiceWorkerModule } from '@angular/service-worker';
// Basic registration
@NgModule({
imports: [
ServiceWorkerModule.register('ngsw-worker.js')
]
})
export class AppModule {}
// With options
@NgModule({
imports: [
ServiceWorkerModule.register('ngsw-worker.js', {
enabled: !isDevMode(),
scope: '/',
registrationStrategy: 'registerWhenStable:30000'
})
]
})
export class AppModule {}Environment provider function for standalone/functional Angular setup.
/**
* Sets up providers to register the given Angular Service Worker script
* @param script - Path to the service worker script file
* @param options - Registration options including enablement and strategies (default: {})
* @returns Environment providers for bootstrapApplication
*/
function provideServiceWorker(
script: string,
options: SwRegistrationOptions = {}
): EnvironmentProviders;Usage Examples:
import { bootstrapApplication } from '@angular/platform-browser';
import { provideServiceWorker } from '@angular/service-worker';
// Basic setup
bootstrapApplication(AppComponent, {
providers: [
provideServiceWorker('ngsw-worker.js')
]
});
// With configuration
bootstrapApplication(AppComponent, {
providers: [
provideServiceWorker('ngsw-worker.js', {
enabled: !isDevMode(),
registrationStrategy: 'registerImmediately'
})
]
});Configuration options for service worker registration behavior.
/**
* Configuration options for ServiceWorker registration
* Can be provided as token or passed to register methods
*/
abstract class SwRegistrationOptions {
/**
* Whether the ServiceWorker will be registered and related services enabled
* Default: true
*/
enabled?: boolean;
/**
* ServiceWorker registration scope defining URL range it can control
* Used when calling ServiceWorkerContainer.register()
*/
scope?: string;
/**
* ServiceWorker registration strategy determining when it registers
* Default: 'registerWhenStable:30000'
*
* Options:
* - 'registerWhenStable:<timeout>': Register when app stabilizes or after timeout
* - 'registerImmediately': Register immediately
* - 'registerWithDelay:<timeout>': Register after specified delay
* - Function returning Observable: Custom registration trigger
*/
registrationStrategy?: string | (() => Observable<unknown>);
}Registration Strategy Examples:
// Wait for app to stabilize, max 30 seconds
{ registrationStrategy: 'registerWhenStable:30000' }
// Register immediately on app start
{ registrationStrategy: 'registerImmediately' }
// Register after 5 second delay
{ registrationStrategy: 'registerWithDelay:5000' }
// Custom strategy using Observable
{
registrationStrategy: () => fromEvent(document, 'click').pipe(take(1))
}Low-level registration functions used internally by the module and provider.
/**
* App initializer function that sets up service worker registration
* Handles registration strategy execution and SW communication setup
*/
function ngswAppInitializer(): void;
/**
* Factory function for creating NgswCommChannel instances
* @param opts - Registration options
* @param injector - Angular injector for dependency resolution
* @returns Configured communication channel
*/
function ngswCommChannelFactory(
opts: SwRegistrationOptions,
injector: Injector
): NgswCommChannel;
/**
* Injection token for the service worker script path
*/
const SCRIPT: InjectionToken<string>;Waits for the Angular application to stabilize (no pending micro/macro tasks) before registering the service worker. Includes optional timeout.
'registerWhenStable' or 'registerWhenStable:<timeout>'Registers the service worker as soon as the registration code executes.
'registerImmediately'Registers the service worker after a specified delay in milliseconds.
'registerWithDelay:<timeout>'Provides a function that returns an Observable. Registration occurs when the first value is emitted.
() => Observable<unknown>Service worker registration failures are handled gracefully:
RuntimeErrorCode enum