Add Shared Worker support

index.js

@@ -323,13 +323,13 @@ async function adapterToElements(adapter) {
 }
 
 class WorkerHelper {
-  constructor(url) {
+  constructor(url, workerType) {
     this._id = 0;
     this._promisesByIdMap = new Map();
     this._messagesByIdMap = new Map();
     this._pinged = false;
     this._bad = false;
-    this._worker = new Worker(url, {type: 'module'});
+    this._worker = this._createWorker(url, workerType);
     this._worker.addEventListener('error', (e) => {
       this._bad = true;
       // reject all existing promises
@@ -352,6 +352,17 @@ class WorkerHelper {
       }
     })();
   }
+  _createWorker(url, workerType) {
+    const workerUrl = `${url}?${workerType}`;
+    if (workerType === 'dedicated') {
+      return new Worker(workerUrl, {type: 'module'});
+    }
+    if (workerType === 'shared') {
+      const worker = new SharedWorker(workerUrl, {type: 'module'});
+      return worker.port;
+    }
+    throw new Error(`unknown worker type: ${workerType}`)
+  }
   _process(id) {
     const p = this._promisesByIdMap.get(id);
     if (this._bad) {
@@ -404,8 +415,8 @@ async function checkMisc({haveFallback}) {
   ]));
 }
 
-async function checkWorkers() {
-  addElemToDocument(createHeading('h2', '=', 'workers'));
+async function checkWorkers(workerType) {
+  addElemToDocument(createHeading('h2', '=', `${workerType} workers:`));
 
   const canvas = document.createElement('canvas');
   const offscreen = !!canvas.transferControlToOffscreen
@@ -416,7 +427,7 @@ async function checkWorkers() {
     obj[feature] = supported ? success : fail;
   };
 
-  const worker = new WorkerHelper('worker.js');
+  const worker = new WorkerHelper('worker.js', workerType);
   const {rAF, gpu, adapter, device, context, offscreen: offscreenSupported, twoD } = await worker.getMessage('checkWebGPU', {canvas: offscreenCanvas}, [offscreenCanvas]);
   addSupportsRow('webgpu API', gpu, 'exists', 'n/a');
   if (gpu) {
@@ -576,7 +587,8 @@ async function main() {
       elem,
     ]))));
   await checkMisc({haveFallback});
-  await checkWorkers();
+  await checkWorkers('dedicated');
+  await checkWorkers('shared');
 
   // Add a copy handler to massage the text for plain text.
   document.addEventListener('copy', (event) => {

worker.js

@@ -32,23 +32,34 @@ async function checkWebGPU(id, data) {
 
   results.rAF = !!self.requestAnimationFrame;
 
-  postMessage({id, data: results});
+  this.postMessage({id, data: results});
 }
 
 async function ping(id) {
-  postMessage({id, data: { }});
+  this.postMessage({id, data: { }});
 }
 
 const handlers = {
   ping,
   checkWebGPU,
 };
 
-self.onmessage = function(e) {
+function handleMessage(e) {
   const {command, id, data} = e.data;
   const handler = handlers[command];
   if (!handler) {
     throw new Error(`unknown command: ${command}`);
   }
-  handler(id, data);
-};
+  handler.call(this, id, data);
+}
+
+self.onmessage = function(e) {
+  handleMessage.call(self, e);
+};
+
+self.onconnect = function(e) {
+  const port = e.ports[0];
+  port.onmessage = function(event) {
+    handleMessage.call(port, event);
+  };
+};