JavaScript WorkerLocation protocol Property

What You’ll Learn

The protocol property of a WorkerLocation object returns the protocol (scheme) of the worker’s location as a string. Learn self.location.protocol, the trailing colon, how it differs from origin and href, and what blob workers report—with five examples and try-it labs.

Introduction

A protocol (also called a scheme) is the first part of a URL—like https:, http:, or blob:. Inside a worker, self.location.protocol returns that scheme for the worker script URL, including the trailing colon.

MDN’s classic idea: on a worker related to an https page, location.protocol can look like "https:".

Understanding the protocol Property

A read-only instance property on WorkerLocation that returns the worker’s protocol as a string.

• Value — a string with a trailing colon (e.g. "https:", "blob:").
• vs origin — protocol is only the scheme; origin adds host and port.
• Access — self.location.protocol or location.protocol inside the worker.
• Workers only — not available on the main document thread.
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

Read the property inside a worker script:

const result = self.location.protocol;
// e.g. "https:"

Value

A string.

Typical pattern (MDN idea)

// Inside a Web Worker
const result = self.location.protocol;
self.postMessage(result);

⚖️ protocol vs Related Ideas

Examples Gallery

Examples follow MDN WorkerLocation.protocol. Labs use blob workers and compare protocol with related URL parts.

const result = self.location.protocol;
// e.g. "https:"
self.postMessage(result);

https:

self.postMessage({
  protocol: location.protocol,
  origin: location.origin,
  href: location.href
});

protocol: blob:
origin: …
href: blob:…

self.postMessage({
  protocol: location.protocol,
  href: location.href,
  isBlob: location.protocol === "blob:"
});

protocol: blob:
isBlob: true
href: blob:…

self.postMessage({
  protocol: location.protocol,
  isHttps: location.protocol === "https:",
  isHttp: location.protocol === "http:"
});

protocol: blob:
isHttps: false
isHttp: false

// Worker
self.postMessage(location.protocol);

// Main
worker.onmessage = (e) => {
  console.log("worker:", e.data);
  console.log("page:", location.protocol);
};

worker: blob:
page: http:

🚀 Common Use Cases

• Log the worker scheme for debugging panels.
• Detect blob workers with protocol === "blob:".
• Compare worker protocol with the page protocol.
• Pair with origin and href when diagnosing URLs.
• Teach URL scheme concepts using workers.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Only available in Web Workers (WorkerLocation / self.location).
• Read-only string; includes the trailing colon.
• Blob workers usually report "blob:".
• Related learning: port, origin, href, Worker().

💡 Best Practices