JavaScript WorkerLocation hostname Property

What You’ll Learn

The hostname property of a WorkerLocation object returns the hostname part of the worker’s location (no port). Learn self.location.hostname, how it differs from host, and what blob workers report—with five examples and try-it labs.

Introduction

Inside a Web Worker, self.location is a WorkerLocation for the worker script URL. hostname is just the name part—for example localhost—without any port number.

MDN’s classic example: for a worker on http://localhost:8080/, location.hostname returns "localhost" (not "localhost:8080").

Understanding the hostname Property

A read-only instance property on WorkerLocation that returns the hostname part of the worker’s location as a string.

• Value — a string (for example "localhost").
• No port — unlike host, the port is not included.
• Access — self.location.hostname or location.hostname 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 = location.hostname;
// e.g. "localhost" on http://localhost:8080/

Value

A string.

Typical pattern (MDN idea)

// Inside a Web Worker on http://localhost:8080/
const result = location.hostname; // "localhost"
self.postMessage(result);

⚖️ hostname vs Related Ideas

Examples Gallery

Examples follow MDN WorkerLocation.hostname. Labs use blob workers (hostname may be empty) and compare related URL parts.

// On http://localhost:8080/
const result = location.hostname; // "localhost"
self.postMessage(result);

localhost

self.postMessage({
  hostname: location.hostname,
  protocol: location.protocol,
  isEmpty: location.hostname === ""
});

hostname: ""
protocol: blob:
isEmpty: true

self.postMessage({
  hostname: location.hostname,
  host: location.host,
  port: location.port
});

hostname: localhost
host: localhost:8080
port: 8080

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

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

worker: ""
page: localhost

const name = location.hostname;
self.postMessage({
  hostname: name,
  isLocalhost: name === "localhost"
});

hostname: localhost
isLocalhost: true

🚀 Common Use Cases

• Detect local vs production hostnames inside a worker.
• Log which hostname a dedicated worker script was loaded from.
• Debug blob workers (empty hostname) vs http(s) workers.
• Pair with host / port in diagnostics.
• Compare worker hostname with the page hostname when investigating origins.

🔧 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; often empty for blob: worker URLs.
• Does not include the port—see host.
• Related learning: host, hash, Worker().

💡 Best Practices