Mirror the ports property (GoogleChrome#2874)

Author: jeffposnick

packages/workbox-window/src/Workbox.ts

@@ -528,7 +528,7 @@ class Workbox extends WorkboxEventTarget {
    * @param {Event} originalEvent
    */
   private readonly _onMessage = async (originalEvent: MessageEvent) => {
-    const {data, source} = originalEvent;
+    const {data, ports, source} = originalEvent;
 
     // Wait until there's an "own" service worker. This is used to buffer
     // `message` events that may be received prior to calling `register()`.
@@ -543,8 +543,9 @@ class Workbox extends WorkboxEventTarget {
     if (this._ownSWs.has(source as ServiceWorker)) {
       this.dispatchEvent(new WorkboxEvent('message', {
         data,
-        sw: source as ServiceWorker,
         originalEvent,
+        ports,
+        sw: source as ServiceWorker,
       }));
     }
   }
@@ -564,6 +565,7 @@ export {Workbox};
  * @property {Event} originalEvent The original [`message`]{@link https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent}
  *     event.
  * @property {string} type `message`.
+ * @property {MessagePort[]} ports The `ports` value from `originalEvent`.
  * @property {Workbox} target The `Workbox` instance.
  */
 

packages/workbox-window/src/utils/WorkboxEvent.ts

@@ -28,8 +28,9 @@ export class WorkboxEvent<K extends keyof WorkboxEventMap> {
 }
 
 export interface WorkboxMessageEvent extends WorkboxEvent<'message'> {
-  originalEvent: Event;
   data: any;
+  originalEvent: Event;
+  ports: readonly MessagePort[];
 }
 
 export interface WorkboxLifecycleEvent extends WorkboxEvent<keyof WorkboxLifecycleEventMap> {

test/workbox-window/window/sw-message-reply.js

@@ -17,7 +17,8 @@ addEventListener('message', async (event) => {
       includeUncontrolled: true,
     });
     for (const win of windows) {
-      win.postMessage('postMessage from SW!');
+      const channel = new MessageChannel();
+      win.postMessage('postMessage from SW!', [channel.port1]);
     }
   } else if (event.data.type === 'BROADCAST_BACK') {
     const bc = new BroadcastChannel('workbox');

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

@@ -570,11 +570,13 @@ describe(`[workbox-window] Workbox`, function() {
         wb.messageSW({type: 'POST_MESSAGE_BACK'});
         await nextEvent(wb, 'message');
 
-        assertMatchesWorkboxEvent(messageSpy.args[0][0], {
-          type: 'message',
-          target: wb,
+        const wbEvent = messageSpy.args[0][0];
+        assertMatchesWorkboxEvent(wbEvent, {
           data: 'postMessage from SW!',
           originalEvent: {type: 'message'},
+          ports: wbEvent.originalEvent.ports,
+          target: wb,
+          type: 'message',
         });
       });