Inline Web Workers with Blob URLs

Technical Deep Dive & Specifications

The Anatomy of a Blob URL Worker

A Blob URL is a unique URI generated by the browser pointing directly to binary data stored in browser memory: blob:https://example.com/d944c680-60b7-4c3e-953e-519846f497a5

+---------------------------------------------------------------------------------------------------+
|                                 INLINE BLOB WORKER CREATION PIPELINE                              |
+---------------------------------------------------------------------------------------------------+

   [ 1. String Code ] ──> `const src = "self.onmessage = (e) => { ... }"`
            │
            ▼
   [ 2. Binary Blob ] ──> `const blob = new Blob([src], { type: 'application/javascript' })`
            │
            ▼
   [ 3. Object URL ]  ──> `const url = URL.createObjectURL(blob)` (Returns `blob:https://...`)
            │
            ▼
   [ 4. Spawn Thread] ──> `const worker = new Worker(url, { name: 'InlineWorker' })`
            │
            ▼
   [ 5. Memory GC ]   ──> `URL.revokeObjectURL(url)` (Frees URL registry reference)

The Function Serialization Technique (fn.toString())

Writing long worker scripts inside multi-line template literals (const code = \...``) loses IDE syntax highlighting, linting, and autocomplete.

Senior frontend architects use the Function Serialization Pattern:

// Define worker code as a normal, typed JavaScript function
function workerLogic() {
  self.onmessage = function(e) {
    const numbers = e.data;
    const sorted = numbers.sort((a, b) => a - b);
    self.postMessage(sorted);
  };
}

// Convert function body into an Immediately Invoked Function Expression (IIFE)
function createInlineWorker(fn) {
  const code = `(${fn.toString()})();`;
  const blob = new Blob([code], { type: 'application/javascript' });
  const url = URL.createObjectURL(blob);
  const worker = new Worker(url);
  URL.revokeObjectURL(url); // Safe to revoke immediately after Worker() constructor returns!
  return worker;
}

// Instantiate
const worker = createInlineWorker(workerLogic);

[!NOTE] Because fn.toString() only serializes the function source code, closures are not preserved. Any variables defined outside workerLogic in the parent scope will not be accessible inside the worker.

Object URL Memory Management: When to Call revokeObjectURL()

• URL.createObjectURL(blob) registers an entry in the browser's internal URL-to-memory table.
• As soon as new Worker(url) executes synchronously, the browser reads and parses the script stream into the worker isolate.
• You can safely call URL.revokeObjectURL(url) immediately after the constructor returns. You do not need to wait for the worker to terminate.

Content Security Policy (CSP) Considerations

If your website enforces strict Content Security Policies via HTTP headers, creating inline Blob workers requires permission in the worker-src or script-src directive:

Content-Security-Policy: default-src 'self'; worker-src 'self' blob:;

If worker-src is missing, the browser falls back to child-src, and then script-src. If blob: is omitted from the policy, calling new Worker(blobUrl) throws:
Refused to create a worker from 'blob:...' because it violates the following Content Security Policy directive.

💻 Interactive Code Playground

Below is a complete implementation of a zero-dependency Async Micro-Thread Executor (runInWorker(fn, ...args)). It converts any pure JavaScript function into a non-blocking, Promise-returning background OS thread.

Starter Code

Line-by-Line Code Breakdown

• Lines 50–79 (spawnAsync(fn, ...args)): A universal helper that accepts any pure JavaScript function and arguments, runs it in an ephemeral background thread, and resolves a standard Promise.
• Line 55 (const targetFn = ${fn.toString()};): Injects the serialized function source code directly into the generated worker script.
• Line 61 (self.close()): The worker terminates itself immediately after returning its single result, guaranteeing zero lingering background threads.
• Line 68 (URL.revokeObjectURL(blobUrl)): Revokes the blob URL immediately after new Worker() is constructed.
• Lines 84–112: heavySort and estimatePi are authored as standard, clean JavaScript functions with full syntax highlighting and type safety.

Expected Browser Render Output

⚡ Single-File Inline Worker Library
Execute arbitrary CPU-heavy functions in background threads without creating external .js files.

[ Button: 1. Sort 1,000,000 Numbers ] [ Button: 2. Estimate Pi (50M Monte Carlo) ]

✅ Monte Carlo Simulation Finished in 342.50ms!
{
  "iterations": 50000000,
  "estimatedPi": 3.14164848,
  "actualPi": 3.141592653589793,
  "errorPercentage": "0.0018%"
}