Client: postMessage()-Methode

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.

Keiner (undefined).

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.

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);
});