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 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.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);
    window.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

Specification	Status	Comment
Service Workers The definition of 'Client' in that specification.	Working Draft	Initial definition.

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 Extended Support Release (ESR.)

See also

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