fix(@schematics/angular): explicitly specify ServiceWorker registration strategy

This commit updates the `service-worker` schematics to explicitly specify the ServiceWorker registration strategy in the [ServiceWorkerModule.register()] call. We still use the default strategy, so there should be no change in the behavior of the generated apps. However, it will help people find out what the default behavior is when debugging potential issues with delayed ServiceWorker registration. (See the discussion in angular/angular#41223 for more details.) [1]: https://angular.io/api/service-worker/ServiceWorkerModule#register

Author: gkalpak

packages/schematics/angular/service-worker/index.ts

@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import { join, normalize } from '@angular-devkit/core';
+import { join, normalize, tags } from '@angular-devkit/core';
 import {
  Rule,
  SchematicContext,
@@ -90,8 +90,14 @@ function updateAppModule(mainPath: string): Rule {
  }
 
  // register SW in app module
- const importText =
- `ServiceWorkerModule.register('ngsw-worker.js', { enabled: ${importModule}.production })`;
+ const importText = tags.stripIndent`
+ ServiceWorkerModule.register('ngsw-worker.js', {
+ enabled: ${importModule}.production,
+ // Register the ServiceWorker as soon as the app is stable
+ // or after 30 seconds (whichever comes first).
+ registrationStrategy: 'registerWhenStable:30000'
+ })
+ `;
  moduleSource = getTsSourceFile(host, modulePath);
  const metadataChanges = addSymbolToNgModuleMetadata(
  moduleSource, modulePath, 'imports', importText);

packages/schematics/angular/service-worker/index_spec.ts

@@ -81,8 +81,13 @@ describe('Service Worker Schematic', () => {
  const tree = await schematicRunner.runSchematicAsync('service-worker', defaultOptions, appTree)
  .toPromise();
  const pkgText = tree.readContent('/projects/bar/src/app/app.module.ts');
- const expectedText = 'ServiceWorkerModule.register(\'ngsw-worker.js\', { enabled: environment.production })';
- expect(pkgText).toContain(expectedText);
+ expect(pkgText).toMatch(new RegExp(
+ '(\\s+)ServiceWorkerModule\\.register\\(\'ngsw-worker\\.js\', \\{\\n' +
+ '\\1 enabled: environment\\.production,\\n' +
+ '\\1 // Register the ServiceWorker as soon as the app is stable\\n' +
+ '\\1 // or after 30 seconds \\(whichever comes first\\)\\.\\n' +
+ '\\1 registrationStrategy: \'registerWhenStable:30000\'\\n' +
+ '\\1}\\)'));
  });
 
  it('should add the SW import to the NgModule imports with aliased environment', async () => {
@@ -110,8 +115,13 @@ describe('Service Worker Schematic', () => {
  const tree = await schematicRunner.runSchematicAsync('service-worker', defaultOptions, appTree)
  .toPromise();
  const pkgText = tree.readContent('/projects/bar/src/app/app.module.ts');
- const expectedText = 'ServiceWorkerModule.register(\'ngsw-worker.js\', { enabled: env.production })';
- expect(pkgText).toContain(expectedText);
+ expect(pkgText).toMatch(new RegExp(
+ '(\\s+)ServiceWorkerModule\\.register\\(\'ngsw-worker\\.js\', \\{\\n' +
+ '\\1 enabled: env\\.production,\\n' +
+ '\\1 // Register the ServiceWorker as soon as the app is stable\\n' +
+ '\\1 // or after 30 seconds \\(whichever comes first\\)\\.\\n' +
+ '\\1 registrationStrategy: \'registerWhenStable:30000\'\\n' +
+ '\\1}\\)'));
  });
 
  it('should add the SW import to the NgModule imports with existing environment', async () => {
@@ -139,8 +149,13 @@ describe('Service Worker Schematic', () => {
  const tree = await schematicRunner.runSchematicAsync('service-worker', defaultOptions, appTree)
  .toPromise();
  const pkgText = tree.readContent('/projects/bar/src/app/app.module.ts');
- const expectedText = 'ServiceWorkerModule.register(\'ngsw-worker.js\', { enabled: environment.production })';
- expect(pkgText).toContain(expectedText);
+ expect(pkgText).toMatch(new RegExp(
+ '(\\s+)ServiceWorkerModule\\.register\\(\'ngsw-worker\\.js\', \\{\\n' +
+ '\\1 enabled: environment\\.production,\\n' +
+ '\\1 // Register the ServiceWorker as soon as the app is stable\\n' +
+ '\\1 // or after 30 seconds \\(whichever comes first\\)\\.\\n' +
+ '\\1 registrationStrategy: \'registerWhenStable:30000\'\\n' +
+ '\\1}\\)'));
  });
 
  it('should put the ngsw-config.json file in the project root', async () => {