Implementierung von Push-Benachrichtigungen mit der Web Push API

Push-Benachrichtigungen halten Nutzer engagiert, auch wenn sie Ihre Webanwendung nicht aktiv verwenden. Die Web Push API ermöglicht es Ihnen, zeitnahe Updates direkt an die Geräte der Nutzer zu senden, ohne auf Drittanbieterdienste angewiesen zu sein. Dieser Leitfaden zeigt, wie Sie native-ähnliche Benachrichtigungen mithilfe von Service Workers, VAPID-Authentifizierung und ordnungsgemäßer Verschlüsselung implementieren.

Voraussetzungen und Browser-Unterstützung

Bevor Sie Push-Benachrichtigungen implementieren, stellen Sie sicher, dass Ihre Anwendung diese Anforderungen erfüllt:

• HTTPS-Verbindung (erforderlich für Service Workers)
• Unterstützung moderner Browser (Chrome, Firefox, Edge, Safari 16.4+)
• Service Worker-Kompatibilität

// Feature detection
if ('serviceWorker' in navigator && 'PushManager' in window) {
  // Push notifications supported
}

Registrierung eines Service Workers

Der Service Worker fungiert als Proxy zwischen Ihrer Web-App und den Push-Diensten. Registrieren Sie ihn beim Laden der Seite:

navigator.serviceWorker.register('/sw.js')
  .then(registration => {
    console.log('Service Worker registered:', registration);
  })
  .catch(error => {
    console.error('Registration failed:', error);
  });

Einrichtung von VAPID-Schlüsseln

VAPID (Voluntary Application Server Identification) authentifiziert Ihren Server bei Push-Diensten. Generieren Sie einmalig ein Schlüsselpaar für Ihre Anwendung:

# Using web-push library (Node.js)
npm install web-push
npx web-push generate-vapid-keys

Speichern Sie den privaten Schlüssel sicher auf Ihrem Server und verwenden Sie den öffentlichen Schlüssel in Ihrer clientseitigen Subscription.

Erstellen von Push-Subscriptions

Fordern Sie die Berechtigung an und abonnieren Sie Nutzer für Push-Benachrichtigungen:

async function subscribeToPush() {
  const registration = await navigator.serviceWorker.ready;
  
  // Request permission (only on user gesture)
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') return;
  
  // Subscribe with VAPID public key
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
  });
  
  // Send subscription to your server
  await fetch('/api/subscribe', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(subscription)
  });
}

// Helper function to convert base64 to Uint8Array
function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/\-/g, '+')
    .replace(/_/g, '/');
  
  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);
  
  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

Das Subscription-Objekt enthält:

• Endpoint: Eindeutige URL zum Senden von Nachrichten
• Keys: Verschlüsselungsschlüssel (p256dh und auth) für die Payload-Sicherheit

Serverseitige Implementierung

Ihr Server muss Nachrichten verschlüsseln und an den Push-Service-Endpoint senden. Die Verwendung der web-push-Bibliothek vereinfacht dies:

const webpush = require('web-push');

webpush.setVapidDetails(
  'mailto:your-email@example.com',
  VAPID_PUBLIC_KEY,
  VAPID_PRIVATE_KEY
);

// Send notification
const payload = JSON.stringify({
  title: 'New Message',
  body: 'You have a new update',
  icon: '/icon-192.png',
  url: 'https://example.com/updates'
});

webpush.sendNotification(subscription, payload, {
  TTL: 86400, // 24 hours
  urgency: 'high'
})
  .catch(error => {
    console.error('Error sending notification:', error);
  });

Verarbeitung von Push-Events im Service Worker

Der Service Worker empfängt und zeigt Push-Benachrichtigungen an:

// sw.js
self.addEventListener('push', event => {
  const data = event.data?.json() || {};
  
  const options = {
    body: data.body || 'Default message',
    icon: data.icon || '/icon.png',
    badge: '/badge.png',
    vibrate: [200, 100, 200],
    data: { url: data.url }
  };
  
  event.waitUntil(
    self.registration.showNotification(data.title || 'Notification', options)
  );
});

// Handle notification clicks
self.addEventListener('notificationclick', event => {
  event.notification.close();
  
  event.waitUntil(
    clients.openWindow(event.notification.data?.url || '/')
  );
});

Browser-spezifische Anforderungen

Verschiedene Browser setzen unterschiedliche Anforderungen für die Implementierung der Web Push API durch:

• Chrome/Edge: Erfordern sichtbare Benachrichtigungen für jede Push-Nachricht
• Firefox: Erlaubt begrenzte stille Push-Nachrichten mit Quota-System
• Safari: Erfordert sichtbare Benachrichtigungen und unterstützt keine stillen Push-Nachrichten

Hinweis: Payload-Größen sind begrenzt: Chrome/Edge/Firefox unterstützen bis zu 4 KB, während Safari 2 KB unterstützt. Halten Sie Nachrichten schlank und laden Sie bei Bedarf zusätzliche Daten in der App nach.

Zeigen Sie Benachrichtigungen immer sofort nach Empfang von Push-Events an, um Berechtigungen über alle Browser hinweg aufrechtzuerhalten.

Best Practices für die Sicherheit

Schützen Sie Ihre Push-Benachrichtigungs-Implementierung:

1. Sichere Endpoints: Machen Sie Subscription-Endpoints niemals öffentlich zugänglich
2. Verschlüsseln Sie Payloads: Alle Nachrichtendaten müssen ECDH-Verschlüsselung verwenden
3. Schützen Sie VAPID-Schlüssel: Speichern Sie sie sicher und generieren Sie sie nur bei Kompromittierung neu
4. Implementieren Sie CSRF-Schutz: Validieren Sie Subscription-Anfragen
5. Rate Limiting: Verhindern Sie Missbrauch durch serverseitige Drosselung

Verwaltung des Subscription-Lebenszyklus

Behandeln Sie Subscription-Änderungen und Ablauf:

// In Service Worker
self.addEventListener('pushsubscriptionchange', event => {
  event.waitUntil(
    self.registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
    })
      .then(subscription => {
        // Update server with new subscription
        return fetch('/api/update-subscription', {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(subscription)
        });
      })
  );
});

Fazit

Die Web Push API bietet einen standardbasierten Ansatz zur Implementierung von Push-Benachrichtigungen ohne Vendor Lock-in. Durch die Kombination von Service Workers, VAPID-Authentifizierung und ordnungsgemäßer Verschlüsselung können Sie zeitnahe Benachrichtigungen bereitstellen, die über moderne Browser hinweg funktionieren. Denken Sie daran, die Präferenzen der Nutzer zu respektieren, Subscription-Lifecycle-Events zu behandeln und plattformspezifische Anforderungen für eine robuste Implementierung zu befolgen.

Beginnen Sie mit der grundlegenden Benachrichtigungszustellung und fügen Sie dann Features wie Action-Buttons, Bildanhänge und Benachrichtigungsgruppierung hinzu, wenn Ihre Implementierung reifer wird.

Häufig gestellte Fragen (FAQs)

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.