External controlling events

Author: jeffposnick

packages/workbox-window/src/Workbox.ts

@@ -502,13 +502,20 @@ class Workbox extends WorkboxEventTarget {
    */
   private readonly _onControllerChange = (originalEvent: Event) => {
     const sw = this._sw;
-    if (sw === navigator.serviceWorker.controller) {
-      this.dispatchEvent(new WorkboxEvent('controlling', {
-        sw,
-        originalEvent,
-        isUpdate: this._isUpdate,
-      }));
+    const isExternal = sw !== navigator.serviceWorker.controller;
 
+    // Unconditionally dispatch the controlling event, with isExternal set
+    // to distinguish between controller changes due to the initial registration
+    // vs. an update-check or other tab's registration.
+    // See https://github.com/GoogleChrome/workbox/issues/2786
+    this.dispatchEvent(new WorkboxEvent('controlling', {
+      isExternal,
+      originalEvent,
+      sw,
+      isUpdate: this._isUpdate,
+    }));
+
+    if (!isExternal) {
       if (process.env.NODE_ENV !== 'production') {
         logger.log('Registered service worker now controlling this page.');
       }
@@ -627,6 +634,8 @@ export {Workbox};
  *     event.
  * @property {boolean|undefined} isUpdate True if a service worker was already
  *     controlling when this service worker was registered.
+ * @property {boolean|undefined} isExternal True if this event is associated
+ *     with an [external service worker]{@link https://developers.google.com/web/tools/workbox/modules/workbox-window#when_an_unexpected_version_of_the_service_worker_is_found}.
  * @property {string} type `controlling`.
  * @property {Workbox} target The `Workbox` instance.
  */

test/workbox-window/integration/test-all.js

@@ -84,6 +84,7 @@ describe(`[workbox-window] Workbox`, function() {
             installedSpyCallCount: installedSpy.callCount,
             waitingSpyCallCount: waitingSpy.callCount,
             controllingSpyCallCount: controllingSpy.callCount,
+            controllingIsExternal: controllingSpy.args[0][0].isExternal,
             activatedSpyCallCount: activatedSpy.callCount,
           });
         } catch (error) {
@@ -94,6 +95,7 @@ describe(`[workbox-window] Workbox`, function() {
       // Test for truthiness because some browsers structure clone
       // `undefined` to `null`.
       expect(result.isUpdate).to.not.be.ok;
+      expect(result.controllingIsExternal).to.not.be.ok;
       expect(result.installedSpyCallCount).to.equal(1);
       expect(result.activatedSpyCallCount).to.equal(1);
       expect(result.controllingSpyCallCount).to.equal(1);
@@ -107,7 +109,9 @@ describe(`[workbox-window] Workbox`, function() {
         try {
           const wb1 = new Workbox('sw-clients-claim.js.njk?v=1');
           const redundantSpy = sinon.spy();
+          const wb1ControllingSpy = sinon.spy();
           wb1.addEventListener('redundant', redundantSpy);
+          wb1.addEventListener('controlling', wb1ControllingSpy);
 
           await wb1.register();
           await window.activatedAndControlling(wb1);
@@ -117,12 +121,12 @@ describe(`[workbox-window] Workbox`, function() {
           const installedSpy = sinon.spy();
           const waitingSpy = sinon.spy();
           const activatedSpy = sinon.spy();
-          const controllingSpy = sinon.spy();
+          const wb2ControllingSpy = sinon.spy();
 
           wb2.addEventListener('installed', installedSpy);
           wb2.addEventListener('waiting', waitingSpy);
           wb2.addEventListener('activated', activatedSpy);
-          wb2.addEventListener('controlling', controllingSpy);
+          wb2.addEventListener('controlling', wb2ControllingSpy);
 
           await wb2.register();
 
@@ -131,9 +135,11 @@ describe(`[workbox-window] Workbox`, function() {
           cb({
             wb1IsUpdate: redundantSpy.args[0][0].isUpdate,
             wb2IsUpdate: installedSpy.args[0][0].isUpdate,
+            wb1ControllingIsExternal: wb1ControllingSpy.args[0][0].isExternal,
+            wb2ControllingIsExternal: wb2ControllingSpy.args[0][0].isExternal,
             installedSpyCallCount: installedSpy.callCount,
             waitingSpyCallCount: waitingSpy.callCount,
-            controllingSpyCallCount: controllingSpy.callCount,
+            controllingSpyCallCount: wb2ControllingSpy.callCount,
             activatedSpyCallCount: activatedSpy.callCount,
           });
         } catch (error) {
@@ -145,6 +151,8 @@ describe(`[workbox-window] Workbox`, function() {
       // `undefined` to `null`.
       expect(result.wb1IsUpdate).to.not.be.ok;
       expect(result.wb2IsUpdate).to.equal(true);
+      expect(result.wb1ControllingIsExternal).to.not.be.ok;
+      expect(result.wb2ControllingIsExternal).to.not.be.ok;
       expect(result.installedSpyCallCount).to.equal(1);
       expect(result.waitingSpyCallCount).to.equal(0);
       expect(result.activatedSpyCallCount).to.equal(1);

test/workbox-window/window/test-Workbox.mjs

@@ -846,21 +846,30 @@ describe(`[workbox-window] Workbox`, function() {
 
         expect(controlling1Spy.callCount).to.equal(1);
         assertMatchesWorkboxEvent(controlling1Spy.args[0][0], {
-          type: 'controlling',
-          target: wb1,
-          sw: await wb1.getSW(),
-          originalEvent: {type: 'controllerchange'},
+          isExternal: false,
           isUpdate: true,
+          originalEvent: {type: 'controllerchange'},
+          sw: await wb1.getSW(),
+          target: wb1,
+          type: 'controlling',
         });
 
-        expect(controlling2Spy.callCount).to.equal(0);
+        // This will be an "external" event, due to wb3's SW taking control.
+        // wb2's SW never controls, because it's stuck in waiting.
+        expect(controlling2Spy.callCount).to.equal(1);
+        assertMatchesWorkboxEvent(controlling2Spy.args[0][0], {
+          isExternal: true,
+          isUpdate: true,
+          type: 'controlling',
+        });
 
         expect(controlling3Spy.callCount).to.equal(1);
         assertMatchesWorkboxEvent(controlling3Spy.args[0][0], {
-          type: 'controlling',
-          target: wb3,
-          sw: await wb3.getSW(),
+          isExternal: false,
           originalEvent: {type: 'controllerchange'},
+          sw: await wb3.getSW(),
+          target: wb3,
+          type: 'controlling',
         });
       });
     });