Client

The Client interface of the ServiceWorker API represents the scope of a service worker client. A service worker client is either a document in a browser context, a Worker, or a SharedWorker, which is controlled by an active worker. A client object acts as a snapshot representation of its associated service worker client in the scope of a service worker.

Methods

Client.postMessage()

Allows a service worker to send a message to a ServiceWorkerClient.

Properties

Client.frameType Read only

Indicates the type of browsing context of the current client. This value can be one of auxiliary, top-level, nested, or none.

Client.id Read only

Returns the universally unique identifier of the Client object.

Client.type Read only

Indicates the type of client the service worker is controlling. Its value can be window, worker, sharedworker, or all.

Client.url Read only

The URL of the current service worker client.

Examples

This code is based on a snippet taken from the service worker post-message sample (see post-message live.) The code sends message data to which the service worker can reply via Client.postMessage().

The message is wrapped in a promise that resolves if the response doesn't contain an error and rejects with the error.

// service worker client (e.g. a document)
function sendMessage(message) {
  return new Promise(function(resolve, reject) {
    // note that this is the ServiceWorker.postMessage version
    navigator.serviceWorker.controller.postMessage(message);
    navigator.serviceWorker.onMessage = function(e) {
      resolve(e.data);
    };
  });
}
// controlling service worker
self.addEventListener("message", function(e) {
  // e.source is a client object
  e.source.postMessage("Hello! Your message was: " + e.data);
});

Specifications

Browser compatibility

• [1] The frameType property is not supported in Chrome 43.0.
• [2] Service workers (and Push) have been disabled in the Firefox 45 & 52 Extended Support Releases (ESR.)

See also

• Using Service Workers
• Service workers basic code example
• Is ServiceWorker ready?
• Promises
• Using web workers
• Channel Messaging API