JavaScript Navigator serviceWorker Property

What You’ll Learn

navigator.serviceWorker is the entry point for the Service Worker API. Learn the ServiceWorkerContainer, feature detection, register(), controller, ready, secure context rules, five examples, and try-it labs.

Introduction

A service worker is a background script that can intercept network requests, cache assets, and help your site work offline or load faster — a core piece of many Progressive Web Apps (PWAs).

navigator.serviceWorker returns a ServiceWorkerContainer. That object lets you register a worker script, check whether this page is already controlled, wait until a worker is ready, and listen for messages / controller changes.

Understanding the serviceWorker Property

Think of navigator.serviceWorker as the desk that manages service workers for this document — not the worker script itself.

• ServiceWorkerContainer — object returned by the property.
• register(scriptURL) — install or update a service worker script.
• controller — the active worker controlling this page, or null.
• ready — Promise that resolves when an active registration exists.
• getRegistration / getRegistrations — look up existing registrations.
• Secure context — HTTPS / localhost required.

📝 Syntax

General form of the property:

navigator.serviceWorker

Value

• A ServiceWorkerContainer object when service workers are available.

Common patterns

// Feature-detect (MDN):
if ("serviceWorker" in navigator) {
  // Supported!
}

// Register a worker at the site root (needs a real /sw.js file):
navigator.serviceWorker
  .register("/sw.js")
  .then((registration) => {
    console.log("Service worker registration succeeded:", registration);
  })
  .catch((error) => {
    console.error("Service worker registration failed: " + error);
  });

// Is this page controlled right now?
if (navigator.serviceWorker.controller) {
  console.log("Controlled by:", navigator.serviceWorker.controller);
}

// Wait until an active worker is ready:
navigator.serviceWorker.ready.then((reg) => {
  console.log("Ready registration:", reg.scope);
});

Examples Gallery

Examples follow MDN navigator.serviceWorker / ServiceWorkerContainer patterns. Prefer Try It Yourself on HTTPS. Registration needs a real service worker file (for example /sw.js) on your origin.

if ("serviceWorker" in navigator) {
  console.log("Supported!");
} else {
  console.log("Service workers are not supported.");
}

Supported!
(or "Service workers are not supported.")

console.log("secure: " + window.isSecureContext);
console.log("serviceWorker in navigator: " + ("serviceWorker" in navigator));

if (!window.isSecureContext) {
  console.log("Serve over HTTPS (or localhost) to use service workers");
} else if (!("serviceWorker" in navigator)) {
  console.log("Secure, but service workers not exposed");
} else {
  console.log("Ready to inspect controller / register");
}

secure: true
serviceWorker in navigator: true
Ready to inspect controller / register

if (!("serviceWorker" in navigator)) {
  console.log("Service workers are not supported.");
} else if (navigator.serviceWorker.controller) {
  console.log("This page is currently controlled by a service worker.");
} else {
  console.log("No controlling service worker yet.");
}

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.addEventListener("controllerchange", () => {
    console.log("Controller changed — a new worker took control.");
  });
}

No controlling service worker yet.
(or "This page is currently controlled…")

if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/sw.js")
    .then((registration) => {
      console.log("Service worker registration succeeded:", registration.scope);
    })
    .catch((error) => {
      console.error("Service worker registration failed: " + error);
    });
} else {
  console.log("Service workers are not supported.");
}

Service worker registration failed: …
(or success with a real /sw.js on HTTPS)

async function listRegs() {
  if (!("serviceWorker" in navigator)) {
    return "Service workers are not supported.";
  }
  const regs = await navigator.serviceWorker.getRegistrations();
  return "registrations: " + regs.length;
}

listRegs().then(console.log);

registrations: 0
(or a positive count if this origin already registered workers)

🚀 Common Use Cases

• Offline / cache — serve shell assets when the network is down.
• Faster repeat visits — cache static CSS / JS / images.
• Background sync & push — with additional APIs, notify or sync later.
• PWA installability — service workers are part of modern installable web apps.
• Progressive enhancement — register when supported; keep a normal site otherwise.

📝 Notes

• Baseline Widely available (MDN, since April 2018).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Secure context required (HTTPS / localhost).
• May be unavailable in private browsing — feature-detect.
• Related: storage, onLine, locks, Window.

💡 Best Practices