or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cli-tools.mdconfiguration.mdindex.mdlow-level-communication.mdmodule-setup.mdpush-notifications.mdtesting.mdupdate-management.md
tile.json

module-setup.mddocs/

Module Registration and Setup

Angular module and standalone provider setup for service worker integration with configurable registration strategies and initialization options.

Capabilities

ServiceWorkerModule

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 {}

provideServiceWorker

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

SwRegistrationOptions

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

Internal Registration Functions

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

Registration Strategies

registerWhenStable

Waits for the Angular application to stabilize (no pending micro/macro tasks) before registering the service worker. Includes optional timeout.

  • Format: 'registerWhenStable' or 'registerWhenStable:<timeout>'
  • Default timeout: 30000ms when no timeout specified in default strategy
  • Use case: Most applications - ensures SW doesn't interfere with initial load

registerImmediately

Registers the service worker as soon as the registration code executes.

  • Format: 'registerImmediately'
  • Use case: Applications that need immediate SW functionality

registerWithDelay

Registers the service worker after a specified delay in milliseconds.

  • Format: 'registerWithDelay:<timeout>'
  • Default timeout: 0 (next tick)
  • Use case: Controlled timing for specific performance requirements

Custom Observable Strategy

Provides a function that returns an Observable. Registration occurs when the first value is emitted.

  • Format: () => Observable<unknown>
  • Use case: Complex registration triggers like user interactions or specific app states

Error Handling

Service worker registration failures are handled gracefully:

  • Registration errors are caught and logged to console
  • Failed registration doesn't block application startup
  • Services remain in disabled state if registration fails
  • Error codes available through RuntimeErrorCode enum