{ "id": "api/service-worker/SwRegistrationOptions", "title": "SwRegistrationOptions", "contents": "\n\n
\n
\n
\n \n API > @angular/service-worker\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

SwRegistrationOptionslink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

Token that can be used to provide options for ServiceWorkerModule outside of\nServiceWorkerModule.register().

\n\n

See more...

\n
\n \n \n \n
\n\nabstract class SwRegistrationOptions {\n enabled?: boolean\n scope?: string\n registrationStrategy?: string | (() => Observable<unknown>)\n}\n\n\n \n \n\n
\n\n\n \n\n \n \n
\n

Descriptionlink

\n

You can use this token to define a provider that generates the registration options at runtime,\nfor example via a function call:

\n\nimport {NgModule} from '@angular/core';\nimport {BrowserModule} from '@angular/platform-browser';\nimport {ServiceWorkerModule, SwRegistrationOptions} from '@angular/service-worker';\n/* . . . */\n\n@NgModule({\n/* . . . */\n imports: [\n BrowserModule,\n ServiceWorkerModule.register('ngsw-worker.js'),\n ],\n providers: [\n {\n provide: SwRegistrationOptions,\n useFactory: () => ({enabled: location.search.includes('sw=true')}),\n },\n ],\n})\nexport class AppModule {\n}\n\n\n\n \n
\n\n \n\n\n\n\n\n\n\n\n
\n

Propertieslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PropertyDescription
\n \n enabled?: boolean\n \n \n

Whether the ServiceWorker will be registered and the related services (such as SwPush and\nSwUpdate) will attempt to communicate and interact with it.

\n\n

Default: true

\n\n
\n \n scope?: string\n \n \n

A URL that defines the ServiceWorker's registration scope; that is, what range of URLs it can\ncontrol. It will be used when calling\nServiceWorkerContainer#register().

\n\n \n
\n \n registrationStrategy?: string | (() => Observable<unknown>)\n \n \n

Defines the ServiceWorker registration strategy, which determines when it will be registered\nwith the browser.

\n\n

The default behavior of registering once the application stabilizes (i.e. as soon as there are\nno pending micro- and macro-tasks) is designed to register the ServiceWorker as soon as\npossible but without affecting the application's first time load.

\n

Still, there might be cases where you want more control over when the ServiceWorker is\nregistered (for example, there might be a long-running timeout or polling interval, preventing\nthe app from stabilizing). The available option are:

\n
    \n
  • registerWhenStable:<timeout>: Register as soon as the application stabilizes (no pending\nmicro-/macro-tasks) but no later than <timeout> milliseconds. If the app hasn't\nstabilized after <timeout> milliseconds (for example, due to a recurrent asynchronous\ntask), the ServiceWorker will be registered anyway.\nIf <timeout> is omitted, the ServiceWorker will only be registered once the app\nstabilizes.
    • \n
  • registerImmediately: Register immediately.
    • \n
  • registerWithDelay:<timeout>: Register with a delay of <timeout> milliseconds. For\nexample, use registerWithDelay:5000 to register the ServiceWorker after 5 seconds. If\n<timeout> is omitted, is defaults to 0, which will register the ServiceWorker as soon\nas possible but still asynchronously, once all pending micro-tasks are completed.
    • \n
  • An Observable factory function: A function that returns an Observable.\nThe function will be used at runtime to obtain and subscribe to the Observable and the\nServiceWorker will be registered as soon as the first value is emitted.
    • \n
\n

Default: 'registerWhenStable:30000'

\n\n
\n
\n\n\n\n\n\n \n\n\n
\n
\n\n\n" }