demo · v132

Binary Protocol Demo

PushMessageData.bytes() (Chrome 132) returns the raw push payload as a Uint8Array — no more arrayBuffer() then new Uint8Array(). This page simulates encoding a compact binary push protocol (header + payload + checksum) and shows how the service worker would decode it with bytes().

Build a binary push packet
Message type
Priority
Payload text
header payload checksum

Decoded in service worker via bytes()

bytes() vs older extraction methods

bytes() — Chrome 132
event.data.bytes()
// → Uint8Array directly
// One method call. Done.

const data = event.data.bytes();
const type = data[0];
const prio = data[1];
arrayBuffer() — pre-132
const buf = await
  event.data.arrayBuffer();
const data = new Uint8Array(buf);
// Extra allocation + async
// for no benefit.

const type = data[0];
text() — for strings
const text =
  event.data.text();
// Fine for JSON payloads.
// But must decode binary:
const bytes =
  new TextEncoder()
    .encode(text);
// Lossy for binary data!
// service-worker.js
self.addEventListener('push', (event) => {
  // bytes() returns Uint8Array directly — no await needed
  const data = event.data.bytes();

  // Decode our custom binary protocol:
  // [type:1][priority:1][payloadLen:1][...payload][checksum:1]
  const type       = data[0];
  const priority   = data[1];
  const payloadLen = data[2];
  const payload    = data.slice(3, 3 + payloadLen);
  const checksum   = data[3 + payloadLen];

  const text = new TextDecoder().decode(payload);

  event.waitUntil(
    self.registration.showNotification(text, {
      badge: priority >= 2 ? '/badge-urgent.png' : '/badge.png',
      tag: `type-${type}`,
    })
  );
});

see also