Signatur
Beschreibung
Die Methode arrayBuffer() der Schnittstelle PushMessageData gibt die Nutzdaten einer empfangenen Push-Nachricht als ArrayBuffer zurück. Auf ein PushMessageData-Objekt greift man im Service Worker über die Eigenschaft event.data eines push-Events zu.
Anders als Body.arrayBuffer() der Fetch-API arbeitet diese Methode synchron. Sie liefert also direkt einen ArrayBuffer und kein Promise. Die Daten sind bereits entschlüsselt, wenn der Service Worker sie erhält, denn der Browser übernimmt die Entschlüsselung nach RFC 8291 (Web Push Encryption).
Verwenden Sie arrayBuffer(), wenn der Server Binärdaten schickt, zum Beispiel kompakt kodierte Protokollnachrichten (Protocol Buffers, CBOR, MessagePack) oder eigene Binärformate. Für Text ist text() besser geeignet, für JSON json(). Wenn Sie ein Uint8Array brauchen, ist bytes() praktischer, sofern der Browser es unterstützt.
Sie können die Methode mehrmals aufrufen. Jeder Aufruf gibt einen neuen ArrayBuffer mit einer Kopie der Daten zurück. Anders als bei Response wird hier kein Datenstrom „verbraucht“.
Rückgabewert
ArrayBuffer mit den rohen, bereits entschlüsselten Bytes der Push-Nachricht.Beispiele
Rohdaten im Service Worker auslesen
// sw.js
self.addEventListener('push', (event) => {
if (!event.data) {
console.log('Push ohne Nutzdaten empfangen');
return;
}
const buffer = event.data.arrayBuffer();
console.log('Empfangene Bytes:', buffer.byteLength);
});Binäres Nachrichtenformat mit DataView auswerten
// Der Server schickt: 1 Byte Typ, 4 Byte Zähler (Big Endian), danach UTF-8-Text
self.addEventListener('push', (event) => {
const buffer = event.data?.arrayBuffer();
if (!buffer || buffer.byteLength < 5) return;
const view = new DataView(buffer);
const type = view.getUint8(0);
const unread = view.getUint32(1); // Big Endian ist Standard
const text = new TextDecoder().decode(new Uint8Array(buffer, 5));
event.waitUntil(
self.registration.showNotification(`Neue Nachricht (Typ ${type})`, {
body: `${text} – ${unread} ungelesen`,
tag: 'inbox'
})
);
});Daten als Hex-String protokollieren (Debugging)
const toHex = (buffer) =>
[...new Uint8Array(buffer)]
.map((b) => b.toString(16).padStart(2, '0'))
.join(' ');
self.addEventListener('push', (event) => {
const buffer = event.data?.arrayBuffer() ?? new ArrayBuffer(0);
console.log('Push-Payload (hex):', toHex(buffer));
});// Wichtig · Fallstricke
- Synchron statt Promise: Schreiben Sie kein
await event.data.arrayBuffer()in der Annahme, es komme ein Promise zurück. Dasawaitschadet zwar nicht, ist aber irreführend. Asynchrone Arbeit im Handler, etwashowNotification(), gehört inevent.waitUntil(). event.datakannnullsein: Wenn der Push ohne Nutzdaten gesendet wurde, istevent.datagleichnull. Prüfen Sie das vorher, zum Beispiel mit optionaler Verkettung (?.).- Nur im Service Worker verfügbar:
PushMessageDatagibt es nur im Kontext vonServiceWorkerGlobalScopeund nur über einen sicheren Ursprung (HTTPS oderlocalhost). - Größe der Nutzdaten: Push-Dienste begrenzen die Nutzdaten auf etwa 4 KB. Große Datenmengen sollten Sie deshalb nicht per Push schicken. Senden Sie stattdessen eine Kennung und laden Sie die eigentlichen Inhalte mit
fetch()nach. - Nicht vertrauenswürdige Eingaben: Die Daten sind zwar verschlüsselt übertragen, prüfen Sie Binärformate aber trotzdem (Länge, Grenzen), bevor Sie sie mit
DataViewauslesen. Ein Lesezugriff außerhalb des Puffers wirft einenRangeError. - Kompatibilität: Safari unterstützt Web Push erst ab Version 16. Auf iOS/iPadOS ab 16.4 funktioniert es nur für Web-Apps, die zum Home-Bildschirm hinzugefügt wurden. Die neuere Methode
bytes()ist noch nicht überall verfügbar.arrayBuffer()ist die Variante, die am breitesten unterstützt wird.