ExtendableMessageEvent.data — Eigenschaft · JavaScript-Referenz

Signatur

ExtendableMessageEvent.data

Beschreibung

Die Eigenschaft data der Schnittstelle ExtendableMessageEvent enthält die Nutzdaten einer Nachricht, die eine Seite (ein Client) oder ein anderer Kontext per postMessage() an einen Service Worker geschickt hat. Man greift im message-Handler des Service Workers darauf zu, also in self.addEventListener("message", handler) bzw. self.onmessage.

Der Wert ist eine Kopie der gesendeten Daten, erzeugt mit dem Structured-Clone-Algorithmus. Übertragen werden können daher primitive Werte, einfache Objekte, Arrays, Date, Map, Set, Blob, ArrayBuffer, typisierte Arrays u. v. m. – aber keine Funktionen, DOM-Knoten oder Klasseninstanzen mit ihrem Prototyp.

Typischer Einsatz: Die Seite schickt Befehle wie { type: "SKIP_WAITING" } oder { type: "CACHE_URLS", urls: [...] }, und der Service Worker wertet event.data aus. Da ExtendableMessageEvent von ExtendableEvent erbt, kann man mit event.waitUntil() den Service Worker am Leben halten, bis asynchrone Arbeit abgeschlossen ist.

Rückgabewert

Typ

any

Beschreibung

Die strukturiert geklonten Nachrichtendaten. Ist nichts übergeben worden bzw. wurde das Event ohne data konstruiert, ist der Wert null.

Beispiele

Befehl von der Seite im Service Worker auswerten

// sw.js
self.addEventListener("message", (event) => {
  const { type } = event.data ?? {};
  if (type === "SKIP_WAITING") {
    self.skipWaiting();
  }
});

// app.js (Seite)
const reg = await navigator.serviceWorker.ready;
reg.waiting?.postMessage({ type: "SKIP_WAITING" });

URLs vorab cachen und mit waitUntil absichern

// sw.js
self.addEventListener("message", (event) => {
  if (event.data?.type !== "CACHE_URLS") return;

  event.waitUntil((async () => {
    const cache = await caches.open("runtime-v1");
    await cache.addAll(event.data.urls);
    // Antwort an den sendenden Client
    event.source?.postMessage({ type: "CACHED", count: event.data.urls.length });
  })());
});

// app.js
navigator.serviceWorker.controller?.postMessage({
  type: "CACHE_URLS",
  urls: ["/", "/styles.css", "/app.js"]
});
navigator.serviceWorker.addEventListener("message", (e) => console.log(e.data));

{ type: "CACHED", count: 3 }

Event manuell konstruieren (z. B. für Tests)

// Im Service-Worker-Kontext
const evt = new ExtendableMessageEvent("message", {
  data: { hello: "world" }
});
console.log(evt.data.hello);

const leer = new ExtendableMessageEvent("message");
console.log(leer.data);

world null

// Wichtig · Fallstricke

Kopie, keine Referenz: Änderungen an event.data wirken sich nicht auf das Original beim Sender aus. Nicht klonbare Werte (Funktionen, DOM-Elemente) lösen beim Senden eine DataCloneError-Ausnahme aus.
Daten validieren: Prüfe Struktur und Typ von event.data, bevor du darauf reagierst, und nutze bei Bedarf event.origin bzw. event.source, um den Absender zu verifizieren.
Übertragbare Objekte: Mit postMessage(data, [buffer]) übertragene ArrayBuffer werden verschoben statt kopiert – beim Sender sind sie danach leer (byteLength === 0).
Ohne event.waitUntil() kann der Browser den Service Worker beenden, bevor asynchrone Arbeit auf Basis von data fertig ist.
ExtendableMessageEvent existiert nur im Service-Worker-Kontext; auf der Seite empfängt man Antworten als gewöhnliches MessageEvent. Service Worker erfordern HTTPS (außer localhost).

Siehe auch

ExtendableCookieChangeEvent.deleted ExtendableMessageEvent.ports ExtendableMessageEvent.origin ExtendableMessageEvent.source ExtendableMessageEvent.lastEventId