<code-example path="service-worker-getting-started/src/app/app.module.ts" linenums="false" header="src/app/app.module.ts" region="sw-module"> </code-example>

You can pass some options to the `register()` method.

- enabled: optional parameter, by default is true, if enabled is false, the module will behave like the browser not support service worker, and service worker will not be registered.

- scope: optional parameter, to specify the subset of your content that you want the service worker to control.

- registrationStrategy: optional parameter, specify a strategy that determines when to register the service worker, the available options are:

- registerWhenStable: this is the default behavior, the service worker will register when the application is stable (no microTasks or macroTasks remain).

- registerImmediately: register immediately without waiting the application to become stable.

- registerDelay:timeout : register after the timeout period, `timeout` is the number of milliseconds to delay registration. For example `registerDelay:5000` would register the service worker after 5 seconds. If the number of `timeout` is not given (`registerDelay`), by default, `timeout` will be `0`, but it is not equal to `registerImmediately`, it will still run a `setTimeout(register, 0)` to wait all `microTasks` to finish then perform registration of the service worker.

- A factory to get Observable : you can also specify a factory which returns an Observable, the service worker will be registered the first time that a value is emitted by the Observable.

This document explains how to enable Angular service worker support in projects that you created with the [Angular CLI](cli). It then uses a simple example to show you a service worker in action, demonstrating loading and basic caching.

To set up the Angular service worker in your project, use the CLI command `ng add @angular/pwa`. It takes care of configuring your app to use service workers by adding the `service-worker` package along

ng add @angular/pwa --project *project-name*

1. Adds the `@angular/service-worker` package to your project.

6. Creates the service worker configuration file called [`ngsw-config.json`](/guide/service-worker-config), which specifies the caching behaviors and other settings.

Now, build the project:

This section demonstrates a service worker in action,

using an example application.

To simulate a network issue, disable network interaction for your application. In Chrome:

For applications that do not use the Angular service worker, refreshing now would display Chrome's Internet disconnected page that says "There is no Internet connection".

With the addition of an Angular service worker, the application behavior changes. On a refresh, the page loads normally.

Now that you've seen how service workers cache your application, the

next step is understanding how updates work.

2. Close the application tab, but not the window. This should also close the Developer Tools.

* [Communicating with service workers](guide/service-worker-communications).

import {Observable} from 'rxjs';

registrationStrategy?: (() => Observable<any>)|string;

if (typeof options.registrationStrategy === 'function') {

const observable = options.registrationStrategy();

const subscription = observable.subscribe(() => {

navigator.serviceWorker.register(script, {scope: options.scope});

subscription.unsubscribe();

});

} else {

const registrationStrategy = typeof options.registrationStrategy === 'string' ?

options.registrationStrategy :

'registerWhenStable';

if (registrationStrategy === 'registerWhenStable') {

whenStable.then(() => navigator.serviceWorker.register(script, {scope: options.scope}));

} else if (registrationStrategy === 'registerImmediately') {

navigator.serviceWorker.register(script, {scope: options.scope});

} else if (registrationStrategy.indexOf('registerDelay') !== -1) {

const split = registrationStrategy.split(':');

const delayStr = split.length > 1 ? split[1] : undefined;

const delay = Number(delayStr);

setTimeout(

() => navigator.serviceWorker.register(script, {scope: options.scope}),

typeof delay === 'number' ? delay : 0);

} else {

// wrong strategy

throw new Error(

`Unknown service worker registration strategy: ${options.registrationStrategy}`);

}

}

registrationStrategy?: (() => Observable<any>) | string;