Service Worker Control

A service worker controls a page when that page is within the worker's scope and its active service worker is associated with the page. A controlled page can have its network requests intercepted by that worker.

A service worker does not automatically control every page under its registration. Control depends primarily on the registration's scope and which service worker is currently active for that registration.

The `navigator.serviceWorker.controller` property tells a page which active service worker currently controls it. It is `null` when the page is not controlled, such as during an initial load before a worker has taken control.

By default, a registration's scope is based on the service worker script's location. A worker can sometimes use a broader scope when the server permits it, but the page still has to fall within the resulting scope.

A worker normally gains control of matching pages after navigation following activation. Calling `clients.claim()` from an active worker can allow it to take control of existing matching clients without waiting for another navigation.

Control is important because controlled clients can participate in service-worker features such as fetch interception. Registration, activation, scope, and control are related but distinct lifecycle concepts.

Key points

• A page is controlled only when an active service worker is associated with it.
• `navigator.serviceWorker.controller` exposes the controlling worker or `null`.
• Scope determines which client URLs a registration can control.
• A newly activated worker normally controls matching pages after navigation.
• `clients.claim()` can make an active worker claim matching existing clients.

Interview questions

How do you tell whether the current page is controlled by a service worker?

Check `navigator.serviceWorker.controller`. If it contains a `ServiceWorker` object, the current page is controlled. If it is `null`, the page is not currently controlled. This is different from merely checking whether a service worker has been registered.

What determines whether a service worker can control a page?

The page must fall within the registration's scope, and the registration must have an active service worker associated with it. The scope establishes the set of URLs that can be controlled. A page outside that scope is not controlled by that registration.

Why might a newly installed service worker not control the page that triggered registration?

Installation and activation do not automatically mean that an existing page is controlled. The page may have been loaded before the worker became active, so it can remain associated with no controller until a later navigation. An active worker can use `clients.claim()` during activation to take control of matching existing clients.

What is the relationship between scope and `navigator.serviceWorker.controller`?

Scope defines which client URLs a registration is eligible to control. The `controller` property reports the specific service worker currently controlling this page. Therefore, being inside a registration's scope is necessary but does not by itself guarantee that the current page has a controller.

What happens to a page's controller when a new service worker version takes over?

A registration can have an installing, waiting, and active worker during an update lifecycle. The newly active worker becomes the controller for clients it takes control of, while an already controlled page may continue with its existing controller until the relevant control relationship changes. Developers often coordinate updates with lifecycle events when they need predictable application behavior.