From 6fa88567211ededc657f5cbeb71afb8592191058 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 26 Mar 2021 18:02:20 +0200
Subject: [PATCH] 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
---
 .../angular/service-worker/index.ts           | 12 ++++++---
 .../angular/service-worker/index_spec.ts      | 27 ++++++++++++++-----
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/packages/schematics/angular/service-worker/index.ts b/packages/schematics/angular/service-worker/index.ts
index 650d21206676..3c0a0b44e2e4 100644
--- a/packages/schematics/angular/service-worker/index.ts
+++ b/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);
diff --git a/packages/schematics/angular/service-worker/index_spec.ts b/packages/schematics/angular/service-worker/index_spec.ts
index 2b4a5768d3c9..7cbec451166e 100644
--- a/packages/schematics/angular/service-worker/index_spec.ts
+++ b/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 () => {