„Wir brauchen eine App, damit wir Push-Benachrichtigungen versenden können.“ Ein Jahrzehnt lang war dies der einzige Grund, warum Marken 100.000 Euro für die Entwicklung nativer Apps ausgegeben haben. Das Netz war still. Wenn der Benutzer den Tab geschlossen hat, haben Sie ihn verloren.

Diese Ära ist vorbei. Mit iOS 16.4 (2023) hat Apple endlich Web Push für Web-Apps auf dem Startbildschirm aktiviert. Die Lücke zwischen „Native App“ und „Website“ ist praktisch geschlossen.

Bei Maison Code Paris sehen wir Push nicht als Marketingkanal, sondern als Benutzeroberflächenerweiterung. Es ist eine Möglichkeit, kritische Zustände („Ihr Taxi ist da“, „Ihre Bestellung wurde versandt“) auf der persönlichsten Geräteoberfläche des Benutzers anzuzeigen: dem Sperrbildschirm.

Warum Maison Code darüber spricht

Bei Maison Code Paris fungieren wir als das architektonische Gewissen unserer Kunden. Wir übernehmen oft „moderne“ Stacks, die ohne grundlegendes Verständnis für Skalierung gebaut wurden.

Wir diskutieren dieses Thema, weil es einen kritischen Wendepunkt in der technischen Reife darstellt. Die korrekte Implementierung unterscheidet ein fragiles MVP von einer widerstandsfähigen Plattform auf Unternehmensniveau.

Die Architektur: Wie Web Push funktioniert

Im Gegensatz zu Native Push (das auf proprietären APNs/FCM-Protokollen basiert) ist Web Push ein offener Standard (RFC 8291). Es sind drei Akteure beteiligt:

Der Benutzeragent (Browser): Erstellt ein Abonnement.
Der Push-Dienst: Ein vom Browser-Anbieter (Mozilla, Google, Apple) betriebener Server, der Nachrichten weiterleitet.
Der Anwendungsserver (Sie): Löst die Nachricht aus.

VAPID-Schlüssel (die Sicherheitsschicht)

Woher weiß Apple, dass Sie derjenige sind, der die Benachrichtigung sendet, und kein Spammer, der Ihre Domain fälscht? VAPID (Voluntary Application Server Identification).

Sie generieren ein öffentliches/privates Schlüsselpaar.

Öffentlicher Schlüssel: Wird während des Abonnements an den Browser gesendet.
Privater Schlüssel: Wird zum Signieren jeder Push-Nachricht (JWT) verwendet.

Wenn die Signatur nicht mit dem auf dem Gerät gespeicherten öffentlichen Schlüssel übereinstimmt, verwirft der Push-Dienst die Nachricht. Dies verhindert „Push Hijacking“.

Implementierungsphase 1: Der Servicemitarbeiter

Der Servicemitarbeiter ist das Gehirn des Betriebs. Es bleibt im Hintergrund, auch wenn der Tab geschlossen ist. Sie können keine Push-Ereignisse in Ihrem Haupt-React-Bundle („app.js“) verarbeiten. Sie müssen sie in „sw.js“ verarbeiten.

„Javascript // public/sw.js

self.addEventListener(‘push’, function(event) { if (!event.data) return;

const payload = event.data.json(); const { Titel, Text, Symbol, URL, Aktionen } = Nutzlast;

const-Optionen = { Körper, Symbol: Symbol || ‘/icon-192.png’, Badge: ‘/badge-monochrome.png’, // Kleines Symbol für die Android-Statusleiste data: { url }, // Deep Link speichern Aktionen: Aktionen || [], // Interaktive Schaltflächen tag: ‘order-update’, // Reduziert mehrere Benachrichtigungen zu einer renotify: wahr, };

event.waitUntil( self.registration.showNotification(Titel, Optionen) ); });

// Umgang mit dem Klick self.addEventListener(‘notificationclick’, function(event) { event.notification.close(); // Warnung schließen const urlToOpen = event.notification.data.url || ’/’;

event.waitUntil( clients.matchAll({ type: ‘window’, includeUnControlled: true }).then(windowClients => { // Wenn die Registerkarte bereits geöffnet ist, fokussieren Sie sie for (let client of windowClients) { if (client.url === urlToOpen && ‘focus’ in client) { return client.focus(); } } // Ansonsten neuen Tab öffnen if (clients.openWindow) { return client.openWindow(urlToOpen); } }) ); }); „

Implementierungsphase 2: Das Frontend-Abonnement

Die Browser-Eingabeaufforderung („example.com möchte Ihnen Benachrichtigungen senden“) ist erschreckend. Benutzer blockieren es reflexartig. Rufen Sie niemals „Notification.requestPermission()“ beim Laden der Seite auf.

Wir verwenden das Double Permission Pattern.

Kontext: Benutzer klickt auf „Mich benachrichtigen, wenn der Artikel auf Lager ist“.
Soft Prompt: Zeigt ein schönes HTML-Modal an. „Wir senden Ihnen einmalig eine Benachrichtigung, wenn dieses Produkt wieder verfügbar ist. Zulassen?“
Harte Eingabeaufforderung: Wenn sie auf „Ja“ klicken, dann wird die Überprüfung des nativen Browsers ausgelöst.

„tsx // Komponenten/PushToggle.tsx import { urlBase64ToUint8Array } from ’./utils’;

const PUBLIC_VAPID_KEY = ‘BM…’; // Ihr öffentlicher Schlüssel

export const PushToggle = () => { const subscribe = async () => { const Registration = Warten auf navigator.serviceWorker.ready;

// 1. Erlaubnis anfordern
const result = wait Notification.requestPermission();
if (result !== 'granted') return;

// 2. Abonnieren Sie den Push-Dienst const subscription = Warten auf Registration.pushManager.subscribe({ userVisibleOnly: wahr, applicationServerKey: urlBase64ToUint8Array(PUBLIC_VAPID_KEY) });

// 3. Abonnement-Endpunkt an Ihr Backend senden
wait fetch('/api/push/subscribe', {
  Methode: 'POST',
  Körper: JSON.stringify(Abonnement),
  Header: { 'Content-Type': 'application/json' }
});

};

return ; }; „

Implementierungsphase 3: Der Backend-Versand

Wir verwenden die Node.js-Bibliothek „web-push“, um Verschlüsselung und VAPID-Header zu verwalten.

„Javascript // api/push/send.ts Webpush aus „Web-Push“ importieren;

webpush.setVapidDetails( ‘mailto:admin@maisoncode.paris’, process.env.VAPID_PUBLIC, process.env.VAPID_PRIVATE );

Asynchrone Funktion exportieren sendNotification(userSubscription, message) { versuche es mit { Warten Sie auf webpush.sendNotification(userSubscription, JSON.stringify({ Titel: „Bestellung versandt“, body: ‘Dein Paket ist per DHL unterwegs.’, URL: ‘/orders/TRX-123’, Aktionen: [ { action: ‘track’, title: ‘Track Package’ }, { action: ‘close’, title: ‘Dismiss’ } ] })); } Catch (Fehler) { if (error.statusCode === 410) { // Das Abonnement ist tot (Benutzer hat uns blockiert). Aus DB löschen. Warten auf deleteSubscription(userSubscription.endpoint); } } } „

Der iOS 16.4-Vorbehalt: Die PWA-Anforderung

Apple hat einen großen Reibungspunkt eingeführt. Auf Safari (iOS) ist Web Push NUR verfügbar, wenn der Benutzer die Site zu seinem Startbildschirm hinzufügt. Ein Standard-Tab kann keinen Push empfangen.

Das bedeutet, dass sich Ihre Strategie zunächst auf die PWA-Installation konzentrieren muss. Sie benötigen eine „Install Prompt“-Benutzeroberfläche (ähnlich der Push Soft Prompt), die den Benutzer führt: „Tippen Sie auf „Teilen“ -> „Zum Startbildschirm hinzufügen“, um Bestellaktualisierungen zu erhalten.“

Nach der Installation (im Allgemeinen im „Standalone“-Anzeigemodus ausgeführt) wird die Push-API entsperrt.

Umfangreiche Benachrichtigungen und Aktionen

Mit Benachrichtigungen Aktionen können Benutzer interagieren, ohne die App öffnen zu müssen.

„Neue Nachricht erhalten.“
Aktion 1: „Antworten“ (Öffnet die Texteingabe).
Aktion 2: „Als gelesen markieren“ (Führt einen API-Aufruf im Hintergrund durch).

Dadurch wird die Benachrichtigung von einem „Wegweiser“ in ein „Kontrollpanel“ umgewandelt.

Ethik: Der Junge, der den Wolf weinte

Die Click-Through-Rate (CTR) von Push ist hoch (8-12 %), aber die Abmelderate ist brutal. Wenn Sie eine irrelevante Benachrichtigung senden („Es regnet! Kaufen Sie Schuhe!“), deaktiviert der Benutzer die Berechtigungen global. Anders als bei E-Mail (Spam-Ordner) gibt es hier keinen Mittelweg. Es ist ein- oder ausschaltbar.

Unsere Regel: Push steht für Service. E-Mail ist für Marketing.

✅ Bestellung versandt.
✅ Artikel wieder auf Lager (Benutzer gewünscht).
✅ Flug verspätet.
❌ Der Winterschlussverkauf hat begonnen.
❌ Schauen Sie sich unseren neuen Blogbeitrag an.

10. Umgang mit Push-Müdigkeit (Frequency Capping)

Push-Benachrichtigungen haben eine stark abnehmende Rendite.

Meldung 1: 10 % CTR.
Meldung 2: 5 % CTR.
Nachricht 3: 0,5 % CTR (und 2 % Abmeldungen). Wir implementieren Global Frequency Capping in Redis. „INCR user:123:push:count“ (TTL 24 Stunden). Wenn die Anzahl > 3 ist, verwerfen wir stillschweigend die Marketingnachrichten (lassen jedoch immer Transaktionsnachrichten zu). Wir implementieren auch die Logik „Ruhestunden“ (wecken Sie den Benutzer nicht um 3 Uhr morgens auf, es sei denn, sein Haus brennt).

11. Die iOS PWA-Installationsstrategie

Da Benutzer die PWA installieren müssen, um Push auf iOS zu erhalten, benötigen Sie eine Strategie. Sie können nicht einfach ein Banner „Zum Startbildschirm hinzufügen“ anzeigen. Sie müssen Wert hinter der Installationswand bieten.

„Installieren Sie die App, um Ihr Paket in Echtzeit zu verfolgen.“
„Installieren Sie die App, um den VIP-Rabatt von 10 % freizuschalten.“ Wir erstellen benutzerdefinierte „Installationsanweisungen“, die die Betriebssystemversion des Benutzers erkennen und den genauen Pfeil anzeigen, der auf die Schaltfläche „Teilen“ zeigt.

13. Rich Media: Bilder und GIFs

Text ist langweilig. „Ihre Schuhe wurden versendet“ ist in Ordnung. „Ihre Schuhe wurden versendet“ + [Foto der tatsächlichen Schuhe] ist besser. Web Push unterstützt die Eigenschaft „image“. Allerdings müssen Sie mit den Seitenverhältnissen vorsichtig sein.

Android: Querformat (2:1).
Fenster: Quadratisch (1:1). Wir erstellen ein „Image Resizer“-Lambda, das während des Push-Versands im Handumdrehen gerätespezifische Miniaturansichten generiert.

14. Analytics-Attribution

Woher wissen Sie, ob Push den Umsatz steigert? Auf „Direct Traffic“ kann man sich nicht verlassen. Sie müssen Ihre URLs mit Tags versehen. URL: '/product/123?utm_source=web_push&utm_campaign=black_friday'. Hören Sie aber auch auf das Ereignis „notificationclick“, um einen benutzerdefinierten Analytics-Ping auszulösen, bevor das Fenster geöffnet wird. Dadurch wird „Engagement“ erfasst, selbst wenn die Seite nicht geladen werden kann.

15. Fazit

Push-Benachrichtigungen sind die wirksamste Waffe im Arsenal der Kundenbindung. Für hochfrequentierte Einzelhändler (Lebensmittel, Modegeschäfte) sind sie unverzichtbar. Sie erfordern jedoch einen disziplinierten technischen Ansatz: solides Service-Worker-Management, VAPID-Sicherheit und eine respektvolle UX-Strategie.

Maison Code hilft Marken dabei, sich in diesem Bereich zurechtzufinden, indem es den Sperrbildschirm in einen Konvertierungskanal und nicht in ein Ärgernis verwandelt.

**[Beauftragen Sie unsere Architekten](/contact)**.