Signatur
Beschreibung
Der Konstruktor ExtendableMessageEvent() erzeugt ein Event-Objekt vom Typ ExtendableMessageEvent. Diese Event-Art erhält ein Service Worker im message-Event, wenn eine Seite ihm z. B. mit navigator.serviceWorker.controller.postMessage() Daten schickt. Weil die Klasse von ExtendableEvent erbt, stellt sie waitUntil() bereit. Damit bleibt der Worker aktiv, bis asynchrone Arbeit wie Cache-Updates abgeschlossen ist.
Normalerweise legt der Browser diese Events selbst an. Den Konstruktor ruft man von Hand vor allem in Unit-Tests auf, zum Simulieren von Nachrichten innerhalb eines Service Workers oder beim Nachbau (Polyfill/Mock) einer Service-Worker-Umgebung. Neben den üblichen Event-Optionen nimmt er die Nachrichtenfelder data, origin, lastEventId, source und ports entgegen.
Wichtig: Der Konstruktor steht nur im Service-Worker-Kontext (ServiceWorkerGlobalScope) zur Verfügung, im Fenster-Kontext einer normalen Seite dagegen nicht. Ein Event, das per dispatchEvent() ausgelöst wird, hat isTrusted === false.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $type Pflicht | string | Name des Events, üblicherweise "message". Groß- und Kleinschreibung wird beachtet. |
|
| $options | object | {} | Optionales Konfigurationsobjekt. Neben den Feldern aus ExtendableEventInit (bubbles, cancelable, composed) sind möglich:
|
Rückgabewert
ExtendableMessageEvent-Objekt mit den übergebenen Eigenschaften.Beispiele
Event im Service Worker erzeugen und auslesen
// sw.js – läuft im ServiceWorkerGlobalScope
const event = new ExtendableMessageEvent('message', {
data: { type: 'PING', payload: 42 },
origin: self.location.origin,
lastEventId: 'evt-1'
});
console.log(event.type); // 'message'
console.log(event.data.payload); // 42
console.log(event.ports.length); // 0
console.log(event.source); // nullNachricht intern simulieren und mit waitUntil verarbeiten
// sw.js
self.addEventListener('message', (event) => {
if (event.data?.type === 'CACHE_URLS') {
event.waitUntil(
caches.open('v1').then((cache) => cache.addAll(event.data.urls))
);
console.log('Caching gestartet, isTrusted:', event.isTrusted);
}
});
// Simulierte Nachricht, z. B. beim Aktivieren
self.addEventListener('activate', () => {
const simulated = new ExtendableMessageEvent('message', {
data: { type: 'CACHE_URLS', urls: ['/', '/offline.html'] }
});
self.dispatchEvent(simulated);
});MessagePort für eine Antwort mitgeben
// sw.js – Antwortkanal testen
const { port1, port2 } = new MessageChannel();
port2.onmessage = (e) => console.log('Antwort:', e.data);
self.addEventListener('message', (event) => {
event.ports[0]?.postMessage(`Echo: ${event.data}`);
});
self.dispatchEvent(new ExtendableMessageEvent('message', {
data: 'Hallo',
ports: [port1]
}));// Wichtig · Fallstricke
- Nur im Service Worker: In einem normalen Fenster- oder Dedicated-Worker-Kontext ist
ExtendableMessageEventnicht definiert, der Aufruf führt dort zu einemReferenceError. Mit'ExtendableMessageEvent' in selflässt sich vorher prüfen, ob die Klasse vorhanden ist. waitUntil()darf nur synchron während der Event-Verarbeitung aufgerufen werden, sonst wird einInvalidStateErrorausgelöst. Bei selbst ausgelösten (untrusted) Events verlängert es die Lebensdauer des Workers nicht zuverlässig.- Von Hand erzeugte Events haben
isTrusted === false. Sicherheit: Bei echten Nachrichten sollte manevent.originbzw.event.sourceprüfen, bevor man die Daten verarbeitet. Geben Sie im Test kein gefälschtesoriginvor, auf dessen Prüfung sich Ihr Produktionscode verlässt. - Das Feld
portserwartet echteMessagePort-Objekte. Andere Werte führen zu einemTypeError. - Browser-Unterstützung: in allen modernen Browsern mit Service-Worker-Support vorhanden. Service Worker setzen HTTPS voraus (Ausnahme:
localhost).