HTML Code
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Create a Web Worker</title><style>body{font-family:system-ui,sans-serif;margin:0;padding:1.5rem;background:#f8fafc;color:#334155;line-height:1.6}
h1{margin:0 0 .5rem;font-size:1.25rem;color:#0f172a}p{margin:0 0 1rem;max-width:420px}
button{padding:.55rem 1rem;font-size:.9375rem;background:#2563eb;color:#fff;border:none;border-radius:8px;cursor:pointer;margin-right:.5rem;margin-bottom:.5rem}
button:hover{background:#1d4ed8}button.secondary{background:#64748b}
#status,#result{margin-top:1rem;padding:.75rem 1rem;max-width:420px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;font-size:.875rem}
#status.ok{border-left:4px solid #22c55e}#status.err{border-left:4px solid #ef4444}
#tick{font-variant-numeric:tabular-nums;color:#0f172a;font-weight:700}</style></head>
<body>
  <h1>Create a Web Worker</h1>
  <p>Feature-detect <code>Worker</code>, then create an inline Blob worker.</p>
  <button type="button" id="createBtn">Create worker</button>
  <p id="status">Ready.</p>
  <script>
    var statusEl = document.getElementById('status');
    document.getElementById('createBtn').onclick = function () {
      if (typeof Worker === 'undefined') {
        statusEl.textContent = 'Web Workers are not supported in this browser.';
        statusEl.className = 'err';
        return;
      }
      var code = 'self.onmessage=function(e){postMessage("pong:"+e.data);};';
      var worker = new Worker(URL.createObjectURL(new Blob([code],{type:'application/javascript'})));
      worker.onmessage = function (e) {
        statusEl.textContent = 'Worker created and replied: ' + e.data;
        statusEl.className = 'ok';
        worker.terminate();
      };
      statusEl.textContent = 'Worker created. Sending ping...';
      worker.postMessage('ping');
    };
  </script>
</body></html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
Web Workers — Create a Worker
