Client: postMessage() Methode

Syntax

postMessage(message)
postMessage(message, transfer)
postMessage(message, options)

Parameter

message

Die Nachricht, die an den Client gesendet werden soll. Dies kann jeder strukturiert klonbare Typ sein.

Hinweis: Ein Service Worker befindet sich nicht im gleichen Agenten-Cluster wie sein Client und kann daher keinen Speicher teilen. SharedArrayBuffer Objekte oder Pufferansichten, die von einem unterstützt werden, können nicht über Agenten-Cluster hinweg gesendet werden. Ein Versuch, dies zu tun, erzeugt ein messageerror Ereignis mit einer DataCloneError DOMException auf der Empfängerseite.

transfer Optional

Ein optionales Array von übertragbaren Objekten, deren Besitz übertragen werden soll. Der Besitz dieser Objekte wird an die Empfangsseite übergeben und sie sind auf der sendenden Seite nicht mehr nutzbar. Diese übertragbaren Objekte sollten mit der Nachricht verbunden sein; andernfalls würden sie verschoben, aber nicht tatsächlich auf der Empfängerseite zugänglich sein.

options Optional

Ein optionales Objekt, das die folgenden Eigenschaften enthält:

transfer Optional

Hat die gleiche Bedeutung wie der transfer Parameter.

Rückgabewert

Keiner (undefined).

Beispiele

Der folgende Code sendet eine Nachricht von einem Service Worker an einen Client. Der Client wird mit der get() Methode auf clients, welche ein globales Objekt im Service Worker-Kontext ist, abgerufen.

addEventListener("fetch", (event) => {
  event.waitUntil(
    (async () => {
      // 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 self.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.
      client.postMessage({
        msg: "Hey I just got a fetch from you!",
        url: event.request.url,
      });
    })(),
  );
});

Empfangen dieser Nachricht:

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

Spezifikationen

Browser-Kompatibilität