PushMessageData.bytes() — Methode · JavaScript-Referenz

Signatur

PushMessageData.prototype.bytes()

Beschreibung

Die Methode bytes() des Interfaces PushMessageData gibt die Rohdaten einer empfangenen Push-Nachricht als Uint8Array zurück. Sie steht im Service Worker über event.data im push-Event zur Verfügung.

Anders als Body.bytes() in der Fetch-API arbeitet die Methode synchron. Sie gibt also kein Promise zurück. Die Daten lassen sich außerdem mehrmals lesen, weil jeder Aufruf eine neue Kopie liefert.

Nutze bytes(), wenn der Server Binärdaten schickt, zum Beispiel ein kompaktes Protokoll wie CBOR oder MessagePack, eine Prüfsumme oder komprimierte Inhalte. Für Text gibt es text(), für JSON json(). arrayBuffer() liefert dieselben Daten als ArrayBuffer. Mit bytes() sparst du dir aber den Umweg über new Uint8Array(buffer).

Rückgabewert

Typ

Uint8Array

Beschreibung

Ein neues Uint8Array mit den entschlüsselten Nutzdaten der Push-Nachricht. Jeder Aufruf liefert eine eigene Kopie.

Beispiele

Binäre Push-Daten im Service Worker lesen

// sw.js
self.addEventListener('push', (event) => {
  if (!event.data) return; // Push ohne Nutzdaten

  const bytes = event.data.bytes();
  console.log(`Empfangen: ${bytes.length} Bytes`, bytes);

  event.waitUntil(
    self.registration.showNotification('Neue Daten', {
      body: `${bytes.length} Bytes empfangen`
    })
  );
});

Empfangen: 5 Bytes Uint8Array(5) [1, 42, 0, 7, 255]

Eigenes Binärprotokoll auswerten

// Der Server sendet: Byte 0 = Nachrichtentyp, Byte 1–4 = Zähler (Big Endian), danach UTF-8-Text
self.addEventListener('push', (event) => {
  const bytes = event.data?.bytes() ?? new Uint8Array();
  if (bytes.length < 5) return;

  const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
  const type = view.getUint8(0);
  const count = view.getUint32(1); // Big Endian ist Standard
  const text = new TextDecoder().decode(bytes.subarray(5));

  event.waitUntil(
    self.registration.showNotification(`Typ ${type}: ${count} neue Nachrichten`, { body: text })
  );
});

Fallback für ältere Browser ohne bytes()

const getPushBytes = (data) =>
  typeof data.bytes === 'function'
    ? data.bytes()
    : new Uint8Array(data.arrayBuffer());

self.addEventListener('push', (event) => {
  if (!event.data) return;
  const bytes = getPushBytes(event.data);
  console.log(Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join(' '));
});

01 2a 00 07 ff

// Wichtig · Fallstricke

Browser-Kompatibilität: bytes() wurde erst spät ergänzt (Firefox 129, Chrome 132, Safari 18.4). Prüfe in älteren Umgebungen, ob die Methode existiert, und nutze sonst new Uint8Array(data.arrayBuffer()).
event.data ist null, wenn die Push-Nachricht keine Nutzdaten enthält. Prüfe das vor dem Aufruf, sonst gibt es einen TypeError.
Die Methode ist synchron. Anders als bei Response.bytes() ist daher kein await nötig.
Nur im Service-Worker-Kontext verfügbar. Push setzt einen sicheren Kontext (HTTPS) und eine aktive Push-Subscription voraus.
Web Push begrenzt die Nutzdaten auf etwa 4 KB. Größere Inhalte solltest du nach dem Push per fetch() nachladen.
Rufe showNotification() immer innerhalb von event.waitUntil() auf. Chrome kann sonst eine Standard-Benachrichtigung anzeigen oder das Push-Recht entziehen.

Siehe auch

Uint8Array PushMessageData.blob() PushMessageData.text() PushMessageData.json() PushMessageData.arrayBuffer()