PushMessageData.json() — Methode · JavaScript-Referenz

Signatur

PushMessageData.prototype.json()

Beschreibung

Die Methode json() der Schnittstelle PushMessageData interpretiert die Nutzdaten (Payload) einer empfangenen Push-Nachricht als UTF-8-Text und parst ihn wie JSON.parse(). Zurück kommt direkt der geparste Wert, also meist ein Objekt mit Titel, Text, URL oder anderen Anwendungsdaten.

Zugreifen kannst du darauf nur im Service Worker, und zwar im Handler des push-Events über event.data. Das ist der übliche Weg, wenn dein Server strukturierte Daten per Web Push sendet (etwa über die Bibliothek web-push) und du daraus eine Benachrichtigung mit self.registration.showNotification() erzeugst.

Anders als Body.json() aus der Fetch-API arbeitet PushMessageData.json() synchron und gibt kein Promise zurück. Ist der Payload kein gültiges JSON, wirft die Methode einen SyntaxError. Schicke dein Server also nicht immer JSON, solltest du den Aufruf mit try...catch absichern oder vorher mit text() lesen.

Rückgabewert

Typ

any

Beschreibung

Das Ergebnis des JSON-Parsens: ein Objekt, ein Array, ein String, eine Zahl, ein boolescher Wert oder null, je nach Payload.

Beispiele

Benachrichtigung aus JSON-Payload anzeigen (sw.js)

// sw.js – Service Worker
self.addEventListener('push', (event) => {
  // event.data ist null, wenn die Push-Nachricht keinen Payload hat
  const payload = event.data ? event.data.json() : {};

  const title = payload.title ?? 'Neue Nachricht';
  const options = {
    body: payload.body ?? '',
    icon: '/icons/icon-192.png',
    data: { url: payload.url ?? '/' }
  };

  event.waitUntil(self.registration.showNotification(title, options));
});

Robust parsen mit Rückfall auf Text

// sw.js
const parsePushData = (data) => {
  if (!data) return { title: 'Update', body: '' };
  try {
    return data.json();
  } catch (err) {
    // Kein gültiges JSON: den Rohtext als Nachrichtentext verwenden
    console.warn('Payload ist kein JSON:', err.message);
    return { title: 'Update', body: data.text() };
  }
};

self.addEventListener('push', (event) => {
  const { title, body } = parsePushData(event.data);
  event.waitUntil(self.registration.showNotification(title, { body }));
});

Payload ist kein JSON: Unexpected token 'H', "Hallo Welt" is not valid JSON

Serverseitig JSON senden (Node.js mit web-push)

// server.mjs – Node.js
import webpush from 'web-push';

webpush.setVapidDetails(
  'mailto:admin@example.com',
  process.env.VAPID_PUBLIC_KEY,
  process.env.VAPID_PRIVATE_KEY
);

const subscription = JSON.parse(process.env.PUSH_SUBSCRIPTION);

// Der Payload wird als JSON-String verschickt, im Service Worker liefert event.data.json() das Objekt
await webpush.sendNotification(subscription, JSON.stringify({
  title: 'Bestellung versandt',
  body: 'Deine Bestellung #4711 ist unterwegs.',
  url: '/bestellungen/4711'
}));

// Wichtig · Fallstricke

Synchron, kein Promise: Anders als bei Response.json() brauchst du kein await. Ein await schadet zwar nicht, ist aber unnötig und führt in die Irre.
SyntaxError bei ungültigem JSON: Ein unbehandelter Fehler im push-Handler kann dazu führen, dass keine Benachrichtigung erscheint. Chrome zeigt dann eventuell die allgemeine Meldung „Diese Website wurde im Hintergrund aktualisiert“. Deshalb try...catch verwenden.
event.data kann null sein, wenn der Server eine Push-Nachricht ohne Payload sendet. Vor dem Aufruf von json() immer prüfen.
Nur im Service-Worker-Kontext verfügbar und nur über einen sicheren Ursprung (HTTPS). Safari unterstützt Web Push erst ab Version 16 (macOS 13) bzw. iOS/iPadOS 16.4, auf iOS nur für Web-Apps, die zum Home-Bildschirm hinzugefügt wurden.
Der Payload ist in der Größe begrenzt (in der Praxis etwa 4 KB). Große Datenmengen solltest du nicht per Push schicken, sondern im Service Worker per fetch() nachladen.
Sicherheit: Behandle die geparsten Daten als nicht vertrauenswürdig. Werte wie url vor dem Öffnen mit clients.openWindow() prüfen, zum Beispiel auf den gleichen Ursprung.

Siehe auch

JSON.parse() PushMessageData.blob() PushMessageData.text() PushMessageData.bytes() PushMessageData.arrayBuffer()