Signatur
Beschreibung
Die Methode blob() der Schnittstelle PushMessageData gibt die Rohdaten einer empfangenen Push-Nachricht als Blob-Objekt zurück. Auf ein PushMessageData-Objekt greift man über event.data im push-Ereignis eines Service Workers zu.
Anders als Response.blob() aus der Fetch-API arbeitet PushMessageData.blob() synchron: Die Methode liefert den Blob direkt und kein Promise. Die Nutzdaten wurden beim Eintreffen der Nachricht bereits entschlüsselt und liegen vollständig im Speicher.
blob() ist vor allem dann nützlich, wenn der Server Binärdaten schickt, etwa ein kleines Vorschaubild, komprimierte Daten oder ein eigenes Binärformat. Den Blob kann man anschließend über blob.text(), blob.arrayBuffer() oder URL.createObjectURL() weiterverarbeiten oder in IndexedDB bzw. im Cache Storage ablegen. Für Text oder JSON sind text() und json() meist bequemer, für den direkten Byte-Zugriff arrayBuffer() oder bytes().
Rückgabewert
Blob mit den Nutzdaten der Push-Nachricht. Die Eigenschaft type ist ein leerer String, weil das Push-Protokoll keinen MIME-Typ mitliefert.Beispiele
Push-Daten als Blob auslesen und protokollieren
// service-worker.js
self.addEventListener('push', (event) => {
if (!event.data) {
console.log('Push ohne Nutzdaten empfangen');
return;
}
const blob = event.data.blob(); // synchron, kein await nötig
console.log('Größe:', blob.size, 'Bytes');
console.log('Typ:', JSON.stringify(blob.type));
});Blob in Text umwandeln und Benachrichtigung anzeigen
// service-worker.js
self.addEventListener('push', (event) => {
const handle = async () => {
const blob = event.data?.blob();
// Blob.text() ist im Gegensatz zu blob() asynchron
const message = blob ? await blob.text() : 'Neue Nachricht';
await self.registration.showNotification('Update', {
body: message,
});
};
// Service Worker bis zum Ende der Verarbeitung aktiv halten
event.waitUntil(handle());
});Binär-Payload mit MIME-Typ im Cache ablegen
// service-worker.js
// Annahme: Der Server schickt ein kleines PNG-Bild als Push-Payload
self.addEventListener('push', (event) => {
const store = async () => {
if (!event.data) return;
const raw = event.data.blob();
// Typ ergänzen, weil blob().type immer leer ist
const image = new Blob([raw], { type: 'image/png' });
const cache = await caches.open('push-assets');
await cache.put('/push/latest.png', new Response(image, {
headers: { 'Content-Type': 'image/png' },
}));
await self.registration.showNotification('Neues Bild', {
body: `${image.size} Bytes empfangen`,
icon: '/push/latest.png',
});
};
event.waitUntil(store());
});// Wichtig · Fallstricke
- Synchron:
event.data.blob()gibt kein Promise zurück. Einawaitan dieser Stelle schadet nicht, ist aber überflüssig. Asynchron sind erst die Folgeaufrufe wieblob.text()oderblob.arrayBuffer(). event.datakannnullsein: Push-Nachrichten ohne Nutzdaten sind erlaubt. Prüfeevent.datadaher vorher, sonst wird einTypeErrorgeworfen.- Kein MIME-Typ:
blob.typeist immer"". Den Typ vereinbarst du selbst mit dem Server und setzt ihn bei Bedarf übernew Blob([blob], { type }). - Kleine Nutzdaten: Push-Dienste begrenzen die Nutzdaten meist auf etwa 4 KB. Größere Binärdaten solltest du per
fetch()nachladen und in der Push-Nachricht nur eine URL oder ID mitschicken. event.waitUntil()verwenden: Asynchrone Weiterverarbeitung muss inwaitUntil()gekapselt werden, sonst kann der Browser den Service Worker vorzeitig beenden. Viele Browser verlangen außerdem, dass zu jeder Push-Nachricht eine Benachrichtigung angezeigt wird (userVisibleOnly).- Kompatibilität: Nur im Service-Worker-Kontext und in einem sicheren Kontext (HTTPS) verfügbar. Safari unterstützt die Push-API ab Version 16 (macOS) bzw. 16.4 (iOS, nur für auf dem Home-Bildschirm installierte Web-Apps).
- Sicherheit: Behandle Push-Nutzdaten als nicht vertrauenswürdige Eingabe. Prüfe sie, bevor du sie weiterverarbeitest oder in Benachrichtigungen bzw. Seiten einfügst.