Client: postMessage()-Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

Hinweis: Diese Funktion ist nur in Service Workers verfügbar.

Die postMessage()-Methode der Client-Schnittstelle ermöglicht es einem Service Worker, eine Nachricht an einen Client (ein Window, Worker oder SharedWorker) zu senden. Die Nachricht wird im message-Ereignis auf navigator.serviceWorker empfangen.

Syntax

js
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.

transfer Optional

Ein optionales Array von übertragbaren Objekten, um das Eigentum zu übertragen. Das Eigentum an diesen Objekten wird auf die Empfängerseite übertragen und sie sind auf der sendenden Seite nicht mehr verwendbar. Diese übertragbaren Objekte sollten an die Nachricht angehängt werden; sonst würden sie verschoben, aber tatsächlich nicht auf der Empfängerseite zugänglich.

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 unten stehende Code sendet eine Nachricht von einem Service Worker an einen Client. Der Client wird mit der get()-Methode auf clients, einem Global im Service Worker Scope, abgerufen.

js
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:

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

Spezifikationen

Specification
Service Workers
# dom-client-postmessage-message-options

Browser-Kompatibilität

BCD tables only load in the browser