Add Worker playground

mdn · chrisdavidmills · Jul 4, 2025 · Jul 4, 2025 · Jul 4, 2025 · Jul 4, 2025
commit 03b8594ab3bc29f08463e7115bc5f69da1c853ad
@@ -91,7 +91,7 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
 
 - The "web-share" directory contains a basic demo to show usage of the [Web Share API](https://developer.mozilla.org/docs/Web/API/Navigator/share). [View the demo live](https://mdn.github.io/dom-examples/web-share/).
 
-- The "web-workers" directory contains a basic web worker to demonstrate how [Web Workers](https://developer.mozilla.org/docs/Web/API/Web_Workers_API) work. [View the demo live](https://mdn.github.io/dom-examples/web-workers/simple-web-worker/).
+- The "web-workers" directory contains several demos to show how [Web Workers](https://developer.mozilla.org/docs/Web/API/Web_Workers_API) work. For example, [view the simple web worker demo live](https://mdn.github.io/dom-examples/web-workers/simple-web-worker/).
 
 - The ["webgl-examples"](webgl-examples/README.md) directory contains a number of WebGL examples that demonstrate the [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API), which is used for 2D and 3D graphics on the web.
 

@@ -0,0 +1 @@
+++++++
@@ -0,0 +1,15 @@
+addEventListener("message", function (evt) {
+  let { generation, str } = evt.data;
+
+  let result;
+  try {
+    result = eval(str) + "";
+  } catch (ex) {
+    result = "Exception: " + ex;
+  }
+
+  postMessage({
+    generation,
+    result,
+  });
+});
@@ -0,0 +1,10 @@
+function msghandler(evt) {
+  if (evt.data === "throw") {
+    throw new Error("Throw requested by postMessage()");
+  }
+}
+
+onconnect = function (evt) {
+  evt.ports[0].onmessage = msghandler;
+  throw new Error("Throw initiated by connect!");
+};
@@ -0,0 +1,37 @@
+onmessage = function (evt) {
+  if (evt.data.script) {
+    try {
+      importScripts(evt.data.script);
+      if (self.workerMethod) {
+        workerMethod();
+      }
+    } catch (ex) {
+      let recovered = false;
+      // Scripts with partial in them should be handled for side-effect.
+      if (/partial/i.test(evt.data.script)) {
+        recovered = true;
+        try {
+          workerMethod();
+        } catch (ex2) {
+          ex = ex2;
+        }
+      }
+      postMessage({
+        iMsg: evt.data.iMsg,
+        script: evt.data.script,
+        errored: true,
+        recovered,
+        message: ex.message,
+        filename: ex.filename || ex.fileName,
+        stringified: ex + "",
+        stack: ex.stack + "",
+      });
+      return;
+    }
+    postMessage({
+      errored: false,
+      filname: null,
+      stack: null,
+    });
+  }
+};
@@ -0,0 +1,2 @@
+var foo = 1;
+fo++;
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <script type="application/javascript">
+      const crossOrigin = "https://worker-playground-crossorigin.glitch.me";
+      const syntaxScriptName = "bad-syntax-worker.js";
+      const idTypoWorkerScriptName = "id-typo-worker.js";
+      const topLevelThrowScriptName = "top-level-throw.js";
+      const topLevelPartialScriptName = "top-level-partial.js";
+      const methodThrowScriptName = "method-throws-worker.js";
+
+      function makeRedirectedUrl(scriptName) {
+        return `${crossOrigin}/redirects/script.js?script=${scriptName}&cookieCheck=true`;
+      }
+
+      const w = new Worker("dynamic-importer.js");
+      let iMsg = 0;
+      function sendAndAwait(data) {
+        data.iMsg = ++iMsg;
+        return new Promise((resolve) => {
+          w.addEventListener(
+            "message",
+            (evt) => {
+              resolve(evt.data);
+            },
+            { once: true }
+          );
+          w.postMessage(data);
+        });
+      }
+
+      async function workerDriver() {
+        let msg;
+        msg = await sendAndAwait({
+          script: makeRedirectedUrl(syntaxScriptName),
+        });
+        console.log("Syntax error:", msg);
+        msg = await sendAndAwait({
+          script: makeRedirectedUrl(idTypoWorkerScriptName),
+        });
+        console.log("Id typo error:", msg);
+        msg = await sendAndAwait({
+          script: makeRedirectedUrl(topLevelThrowScriptName),
+        });
+        console.log("Top level throw error:", msg);
+        msg = await sendAndAwait({
+          script: makeRedirectedUrl(topLevelPartialScriptName),
+        });
+        console.log("Top level method throw after top-level throw error:", msg);
+        msg = await sendAndAwait({
+          script: makeRedirectedUrl(methodThrowScriptName),
+        });
+        console.log("Method throw error:", msg);
+
+        w.terminate();
+      }
+      workerDriver();
+    </script>
+  </body>
+</html>
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Worker Playground</title>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- import the webpage's stylesheet -->
+    <link rel="stylesheet" href="style.css" />
+
+    <!-- import the webpage's javascript file -->
+    <script src="script.js" defer></script>
+  </head>
+  <body>
+    <h1>Worker Playground!</h1>
+
+    <p>
+      Type your code into the following text area, and the app will
+      <code>eval()</code> it in a Dedicated Worker, Shared Worker, and Service
+      Worker, letting you know whether it is supported in those contexts.
+    </p>
+
+    <textarea id="inp" cols="80" rows="10"></textarea>
+
+    <h3>Dedicated Worker output:</h3>
+    <textarea id="dedicated" cols="80" rows="10"></textarea>
+    <h3>Shared Worker output:</h3>
+    <textarea id="shared" cols="80" rows="10"></textarea>
+    <h3>Service Worker output:</h3>
+    <textarea id="service" cols="80" rows="10"></textarea>
+  </body>
+</html>
@@ -0,0 +1,3 @@
+function workerMethod() {
+  throw new Error("Hey! Don't call me!");
+}
@@ -0,0 +1,58 @@
+var swReg = null;
+var useSw = null;
+navigator.serviceWorker.register("sw.js").then((reg) => {
+  swReg = reg;
+  useSw = reg.active || reg.waiting || reg.installing;
+});
+
+var taDedicated = document.getElementById("dedicated");
+var dedicatedWorker = new Worker("dedicated.js");
+dedicatedWorker.addEventListener("message", function (evt) {
+  let { result } = evt.data;
+  taDedicated.value = result;
+});
+
+var sharedWorker;
+var taShared = document.getElementById("shared");
+if ("SharedWorker" in window) {
+  sharedWorker = new SharedWorker("shared.js");
+  sharedWorker.port.addEventListener("message", function (evt) {
+    let { result } = evt.data;
+    taShared.value = result;
+  });
+  sharedWorker.port.start();
+} else {
+  taShared.value = "Not supported by this browser.";
+}
+
+var taService = document.getElementById("service");
+var serviceWorker;
+navigator.serviceWorker.addEventListener("message", function (evt) {
+  var { result } = evt.data;
+  taService.value = result;
+});
+
+var curGeneration = 1;
+function evalInAll(str) {
+  var payload = {
+    generation: curGeneration++,
+    str,
+  };
+
+  dedicatedWorker.postMessage(payload);
+  if (sharedWorker) {
+    sharedWorker.port.postMessage(payload);
+  }
+  if (useSw) {
+    useSw.postMessage(payload);
+  } else {
+    navigator.serviceWorker.ready.then((reg) => {
+      reg.active.postMessage(payload);
+    });
+  }
+}
+
+var taInput = document.getElementById("inp");
+taInput.addEventListener("keyup", function (evt) {
+  evalInAll(taInput.value);
+});
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <script type="application/javascript">
+      var sw = new SharedWorker("dynamic-error-shared-worker.js");
+      sw.onerror = function (evt) {
+        console.log("got SharedWorker error event", evt);
+      };
+      sw.port.postMessage("throw");
+    </script>
+  </body>
+</html>
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <script type="application/javascript">
+      var sw = new SharedWorker("id-typo-worker.js");
+      sw.onerror = function (evt) {
+        console.log("got SharedWorker error event", evt);
+      };
+    </script>
+  </body>
+</html>
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <script type="application/javascript">
+      var sw;
+      if (window.SharedWorker) {
+        sw = new SharedWorker("bad-syntax-worker.js");
+        sw.onerror = function (evt) {
+          console.log("got SharedWorker error event", evt);
+        };
+      } else {
+        console.log("No SharedWorker support in this browser!");
+      }
+      var dw = new Worker("bad-syntax-worker.js");
+      dw.onerror = function (evt) {
+        console.log("got DedicatedWorker error event", evt);
+      };
+    </script>
+  </body>
+</html>
@@ -0,0 +1,21 @@
+addEventListener("connect", function (e) {
+  var port = e.ports[0];
+
+  port.addEventListener("message", function (evt) {
+    let { generation, str } = evt.data;
+
+    let result;
+    try {
+      result = eval(str) + "";
+    } catch (ex) {
+      result = "Exception: " + ex;
+    }
+
+    port.postMessage({
+      generation,
+      result,
+    });
+  });
+
+  port.start();
+});
@@ -0,0 +1,11 @@
+body {
+  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
+  margin: 2em;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+h1 {
+  font-style: italic;
+  color: #373fff;
+}
@@ -0,0 +1,48 @@
+const extraKeepAliveMs = 4 * 60 * 1000;
+let curKeepAliveResolve = null;
+let curKeepAliveTimer = 0;
+
+function keepAliveTimerFired() {
+  if (curKeepAliveResolve) {
+    curKeepAliveResolve();
+    curKeepAliveResolve = null;
+    curKeepAliveTimer = 0;
+  }
+}
+
+/**
+ * In order to keep the ServiceWorker's global state around for a while,
+ * always maintain the most-recent postMessage event as providing cover for
+ * extraKeepAliveMs.
+ */
+function ensureKeepAlive(evt) {
+  if (curKeepAliveResolve) {
+    curKeepAliveResolve();
+    clearTimeout(curKeepAliveTimer);
+  }
+
+  evt.waitUntil(
+    new Promise((resolve) => {
+      curKeepAliveResolve = resolve;
+      curKeepAliveTimer = setTimeout(keepAliveTimerFired, extraKeepAliveMs);
+    })
+  );
+}
+
+addEventListener("message", function (evt) {
+  let { generation, str } = evt.data;
+
+  let result;
+  try {
+    result = eval(str) + "";
+  } catch (ex) {
+    result = "Exception: " + ex;
+  }
+
+  evt.source.postMessage({
+    generation,
+    result,
+  });
+
+  ensureKeepAlive(evt);
+});
@@ -0,0 +1,4 @@
+function workerMethod() {
+  throw new Error("Top level contributed this before throwing");
+}
+throw new Error("Recover from this please");
@@ -0,0 +1 @@
+throw new Error("Throw throw throw your boat");
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		throw new Error("Throw throw throw your boat");