feat(worker): support coordinated updates

Ordinarily, the service worker does not activate a pending update until
all application tabs have been closed. For some applications this method
of background updates is acceptable. For others, particularly applications
with long-lived tabs, this can lead to staleness if the conditions for
a background update are never triggered.

This change introduces a channel by which the application can subscribe to
notifications of pending updates. The application can then prompt the user
about the update or choose to just go ahead and apply the update, via a new
method activateUpdate().

Author: alxhub

service-worker/worker/src/companion/comm.ts

@@ -42,6 +42,11 @@ function fromPromise<T>(promiseFn: (() => Promise<T>)): Observable<T> {
   });
 }
 
+export interface UpdateEvent {
+  type: "pending" | "activation";
+  version?: string;
+}
+
 // A push notification registration, including the endpoint URL and encryption keys.
 export class NgPushRegistration {
   private ps: PushSubscription;
@@ -88,6 +93,8 @@ export class NgServiceWorker {
 
   push: Observable<any>;
 
+  updates: Observable<UpdateEvent>;
+
   constructor(private zone: NgZone) {
     // Extract a typed version of navigator.serviceWorker.
     this.container = navigator['serviceWorker'] as ServiceWorkerContainer;
@@ -124,6 +131,11 @@ export class NgServiceWorker {
     this.push = Observable
       .defer(() => this.send({cmd: 'push'}))
       .share();
+
+    // Setup the updates Observable as a broadcast mechanism for update notifications.
+    this.updates = Observable
+      .defer(() => this.send({cmd: 'update'}))
+      .share();
   }
 
   private registrationForWorker(): ((obs: Observable<ServiceWorker>) => Observable<ServiceWorkerRegistration>) {
@@ -205,6 +217,13 @@ export class NgServiceWorker {
     });
   }
 
+  activateUpdate(version: string): Observable<boolean> {
+    return this.send({
+      cmd: 'activateUpdate',
+      version,
+    });
+  }
+
   registerForPush(): Observable<NgPushRegistration> {
     return this
       // Wait for a controlling worker to exist.

service-worker/worker/src/test/e2e/harness/client/src/controller.ts

@@ -21,10 +21,13 @@ import 'rxjs/add/operator/startWith';
     <option value="SW_INSTALL">Install service worker</option>
     <option value="COMPANION_PING">Ping from the companion</option>
     <option value="COMPANION_REG_PUSH">Register for push notifications</option>
-    <option value="FORCE_UPDATE">Force an update</option>
+    <option value="CHECK_FOR_UPDATES">Check for updates</option>
+    <option value="COMPANION_SUBSCRIBE_TO_UPDATES">Subscribe to update notifications</option>
+    <option value="FORCE_UPDATE">Force install pending update</option>
     <option value="RESET">Reset</option>
   </select>
   <span *ngIf="alert" id="alert">ASYNC ALERT</span>
+  <span *ngIf="updateAlert" id="updateAlert">UPDATE ALERT</span>
   <input id="actionInput" #actionInput [(ngModel)]="action">
   <button id="actionExec" (click)="refresh(actionInput.value)">Exec</button>
 </div>
@@ -49,26 +52,43 @@ import 'rxjs/add/operator/startWith';
     </div>
     <button id="installAction" (click)="installWorker(workerUrl.value)">Install service worker</button>
   </div>
+  <div *ngSwitchCase="'FORCE_UPDATE'">
+    <div>
+      <label for="updateVersion">
+        Version:
+      </label>
+      <input #updateVersion id="updateVersion">
+    </div>
+    <button id="updateAction" (click)="forceUpdate(updateVersion.value)">Force update</button>
+  </div>
 </div>
 
+<h5>Result</h5>
 <pre id="result">{{result}}</pre>
+<h5>Updates</h5>
+<pre id="updates">{{updates}}</pre>
+<h5>Log</h5>
 <pre id="log">{{log | json}}</pre>
 `
 })
 export class ControllerCmp {
   result: string = null;
+  updates: string = null;
   action: string = '';
   alert: boolean = false;
+  updateAlert: boolean = false;
   log: string[] = [];
 
   pushSub = null;
+  updateSub = null;
   pushes = [];
 
   constructor(public sw: NgServiceWorker) {
     sw.log().subscribe(message => this.log.push(message));
   }
 
   actionSelected(action): void {
+    console.log('set action', action);
     this.action = action;
   }
 
@@ -87,9 +107,10 @@ export class ControllerCmp {
     switch (action) {
       case 'RESET':
         this.alert = false;
+        this.updateAlert = false;
         this.result = 'reset';
         break;
-      case 'FORCE_UPDATE':
+      case 'CHECK_FOR_UPDATES':
         this
           .sw
           .checkForUpdate()
@@ -136,6 +157,21 @@ export class ControllerCmp {
               this.result = value;
               this.alert = true;
             });
+          break;
+        case 'COMPANION_SUBSCRIBE_TO_UPDATES':
+          this.updateSub = this
+            .sw
+            .updates
+            .scan((acc, value) => acc.concat(value), [])
+            .startWith([])
+            .map(value => JSON.stringify(value))
+            .subscribe(value => {
+              this.updates = value;
+              if (value.length > 2) {
+                this.updateAlert = true;
+              }
+            });
+          break;
       default:
         this.result = null;
     }
@@ -161,6 +197,16 @@ export class ControllerCmp {
         })
       });
   }
+
+  forceUpdate(version: string): void {
+    this
+      .sw
+      .activateUpdate(version)
+      .subscribe(value => {
+        this.result = JSON.stringify(value);
+        this.alert = true;
+      })
+  }
 
   checkServiceWorker(): void {
     this.result = '';

service-worker/worker/src/test/e2e/harness/server/page-object.ts

@@ -23,11 +23,16 @@ export class HarnessPageObject {
     return element(by.css('#result')).getText() as any as Promise<string>;
   }
 
+  get updates(): Promise<string> {
+    browser.wait(protractor.ExpectedConditions.presenceOf(element(by.id('updateAlert'))));
+    return element(by.id('updates')).getText() as any as Promise<string>;
+  }
+
   get asyncResult(): Promise<string> {
     browser.wait(protractor.ExpectedConditions.presenceOf(element(by.id('alert'))));
     return this.result;
   }
-  
+
   request(url: string): Promise<string> {
     this.selectAction('MAKE_REQUEST');
     this.setTextOn('requestUrl', url);
@@ -40,6 +45,13 @@ export class HarnessPageObject {
     this.setTextOn('workerUrl', url);
     this.clickButton('installAction');
   }
+
+  forceUpdate(version: string): Promise<string> {
+    this.selectAction('FORCE_UPDATE');
+    this.setTextOn('updateVersion', version);
+    this.clickButton('updateAction');
+    return this.result;
+  }
 
   hasActiveWorker(): Promise<boolean> {
     this.selectAction('SW_CHECK');
@@ -93,6 +105,8 @@ export class HarnessPageObject {
     this.selectAction('RESET');
     browser.wait(protractor.ExpectedConditions.not(
         protractor.ExpectedConditions.presenceOf(element(by.id('alert')))));
+    browser.wait(protractor.ExpectedConditions.not(
+        protractor.ExpectedConditions.presenceOf(element(by.id('updateAlert')))));
   }
 
   registerForPush(): Promise<string> {
@@ -103,9 +117,14 @@ export class HarnessPageObject {
 
   checkForUpdate(): Promise<boolean> {
     this.reset();
-    this.selectAction('FORCE_UPDATE');
+    this.selectAction('CHECK_FOR_UPDATES');
     return this
       .asyncResult
       .then(JSON.parse);
   }
+
+  subscribeToUpdates(): void {
+    this.reset();
+    this.selectAction('COMPANION_SUBSCRIBE_TO_UPDATES');
+  }
 }

service-worker/worker/src/test/e2e/spec/sanity.e2e.ts

@@ -36,6 +36,15 @@ const UPDATE_MANIFEST = {
   }
 };
 
+const FORCED_UPDATE_MANIFEST = {
+  static: {
+    urls: {
+      '/hello.txt': 'changed_again',
+      '/goodbye.txt': 'same',
+    }
+  }
+};
+
 beforeAll(done => {
   create(8080, 'tmp/es5/src/test/e2e/harness/client').then(s => {
     server = s;
@@ -186,4 +195,35 @@ describe('world sanity', () => {
       .then(result => expect(result).toBe('Should be reloaded'))
       .then(() => done());
   });
+  it('notifies the app when an update is available', done => {
+    server.addResponse('/ngsw-manifest.json', JSON.stringify(FORCED_UPDATE_MANIFEST));
+    server.addResponse('/hello.txt', 'And again');
+    server.addResponse('/goodbye.txt', 'Should still not be re-fetched.');
+    Promise
+      .resolve()
+      .then(() => po.subscribeToUpdates())
+      .then(() => po.checkForUpdate())
+      .then(updated => expect(updated).toBeTruthy())
+      .then(() => po.updates)
+      .then(updates => JSON.parse(updates))
+      .then(updates => {
+        expect(updates.length).toBe(1);
+        const update = updates[0];
+        expect(update['type']).toBe('pending');
+        const hash = update['version'];
+        po.reset();
+        return po.forceUpdate(hash);
+      })
+      .then(() => po.updates)
+      .then(updates => JSON.parse(updates))
+      .then(updates => {
+        expect(updates.length).toBe(2);
+        expect(updates[1].type).toBe('activation');
+      })
+      .then(() => po.request('/hello.txt'))
+      .then(result => expect(result).toBe('And again'))
+      .then(() => po.request('/goodbye.txt'))
+      .then(result => expect(result).toBe('Goodbye world!'))
+      .then(() => done());
+  });
 });