ServiceWorkerContainer.startMessages() — Methode · JavaScript-Referenz

Signatur

ServiceWorkerContainer.prototype.startMessages()

Beschreibung

Schickt ein Service Worker mit Client.postMessage() Nachrichten an eine Seite, landen sie zuerst in der Client-Message-Queue des zugehörigen ServiceWorkerContainer. Der Browser hält diese Nachrichten zurück, bis die Seite bereit ist. So gehen keine Nachrichten verloren, die ankommen, bevor der Listener registriert ist.

Normalerweise startet die Zustellung automatisch in einem von zwei Fällen: wenn das Dokument fertig geparst ist (nach DOMContentLoaded) oder wenn Sie navigator.serviceWorker.onmessage direkt setzen. Wenn Sie addEventListener("message", …) verwenden, startet die Zustellung nicht sofort. Dann sorgt startMessages() dafür, dass die Nachrichten früher ankommen, zum Beispiel wenn Ihre Anwendung schon vor dem Ende des Parsens (etwa in einem Modul oder einem frühen Skript) Nachrichten des Service Workers verarbeiten soll.

Die Methode nimmt keine Argumente und gibt nichts zurück. Mehrfache Aufrufe schaden nicht: Läuft die Zustellung schon, bewirkt ein weiterer Aufruf nichts.

Beispiele

Frühe Nachrichten mit addEventListener empfangen

if ('serviceWorker' in navigator) {
  // Listener registrieren – das startet die Zustellung noch NICHT automatisch
  navigator.serviceWorker.addEventListener('message', (event) => {
    console.log('Nachricht vom Service Worker:', event.data);
  });

  // Zustellung der wartenden Nachrichten sofort starten
  navigator.serviceWorker.startMessages();
}

Nachricht vom Service Worker: { type: 'CACHE_UPDATED', url: '/index.html' }

Service-Worker-Seite: Nachricht an alle Clients senden

// sw.js
self.addEventListener('activate', (event) => {
  event.waitUntil((async () => {
    await self.clients.claim();
    const clients = await self.clients.matchAll({ type: 'window' });
    for (const client of clients) {
      client.postMessage({ type: 'SW_ACTIVATED', version: '1.4.0' });
    }
  })());
});

Erst initialisieren, dann Nachrichten gezielt freigeben

// main.js (als Modul geladen)
const store = new Map();

const init = async () => {
  // Zustand vorbereiten, bevor Nachrichten verarbeitet werden
  const res = await fetch('/api/config');
  store.set('config', await res.json());

  navigator.serviceWorker.addEventListener('message', ({ data }) => {
    if (data.type === 'SW_ACTIVATED') {
      console.log(`Neue SW-Version ${data.version}, Config:`, store.get('config'));
    }
  });

  // Jetzt erst die gepufferten Nachrichten ausliefern
  navigator.serviceWorker.startMessages();
};

if ('serviceWorker' in navigator) {
  init();
}

Neue SW-Version 1.4.0, Config: { theme: 'dark' }

// Wichtig · Fallstricke

Automatischer Start: Wenn Sie navigator.serviceWorker.onmessage = … setzen, ruft der Browser startMessages() selbst auf. Bei addEventListener() passiert das nicht. Ohne expliziten Aufruf kommen die Nachrichten dann erst nach dem Parsen des Dokuments an.
Zeitpunkt: Rufen Sie die Methode erst auf, nachdem alle nötigen Listener registriert sind. Sonst verarbeitet niemand die Nachrichten, die schon in der Warteschlange stehen, und sie gehen verloren.
Die Methode betrifft nur Nachrichten, die der Service Worker an die Seite schickt (Client.postMessage()). Für den umgekehrten Weg (Seite an Service Worker) nutzen Sie ServiceWorker.postMessage(), das mit startMessages() nichts zu tun hat.
Kompatibilität: Service Worker brauchen einen sicheren Kontext (HTTPS oder localhost). Ältere Browser kennen die Methode eventuell nicht. Prüfen Sie im Zweifel mit typeof navigator.serviceWorker.startMessages === 'function'.
Auch in Workern (z. B. Dedicated Worker mit Zugriff auf navigator.serviceWorker) funktioniert die Methode. Dort gibt es kein Dokument, das „fertig geparst“ wird. Deshalb ist der explizite Aufruf dort besonders wichtig.

Siehe auch

ServiceWorkerContainer.register() ServiceWorkerContainer.getRegistration() ServiceWorkerContainer.getRegistrations() ServiceWorker.postMessage() ServiceWorkerRegistration.update()