Client.postMessage

The postMessage() method of Client allows a service worker to send a message to a client (a Window, Worker, or SharedWorker). The message is received in the "message" event on navigator.serviceWorker.

Syntax

Client.postMessage(message[, transfer]);

Parameters

message

The message to send to the service worker. This can be any structured-clonable type.

transfer Optional

A sequence of objects to transfer. These objects must also be present in the message.

Return value

Void.

Examples

Sending a message from a service worker to a client:

addEventListener('fetch', event => {
  event.waitUntil(async function() {
    // Exit early if we don't have access to the client.
    // Eg, if it's cross-origin.
    if (!event.clientId) return;

    // Get the client.
    const client = await clients.get(event.clientId);
    // Exit early if we don't get the client.
    // Eg, if it closed.
    if (!client) return;

    // Send a message to the client.
    self.clients.matchAll().then(function (clients){
      clients.forEach(function(client){
        client.postMessage({
          msg: "Hey I just got a fetch from you!",
          url: event.request.url
        });
      });
    });
   
  }());
});

Receiving that message:

navigator.serviceWorker.addEventListener('message', event => {
  console.log(event.data.msg, event.data.url);
});

Specifications

Browser compatibilityUpdate compatibility data on GitHub