Suchen Sie nach einer einfachen Möglichkeit, PWA-Push-Benachrichtigungen hinzuzufügen?
Progressive Web Apps (PWAs) sind Apps, die auf jedem Gerät funktionieren. Aber es gibt immer einige Probleme beim Senden von Web-Push-Benachrichtigungen. Normalerweise ist das größte Problem die Zustellrate. Sie können Web-Push zu Ihrer PWA auf viele Arten hinzufügen. Aber wie senden Sie Web-Push-Benachrichtigungen, die tatsächlich von Ihrer PWA zugestellt werden?
Keine Sorge! In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie PWA-Push-Benachrichtigungen mit zuverlässigen Zustellraten in weniger als 10 Minuten senden können.
Legen wir los.
TL;DR — Was sind PWA-Push-Benachrichtigungen? Progressive Web App (PWA) Push-Benachrichtigungen sind Standard-Web-Push-Nachrichten, die über den registrierten Service Worker einer PWA zugestellt werden und es Apps, die aus dem Web installiert wurden, ermöglichen, Push-Nachrichten zu empfangen, auch wenn die Webseite geschlossen ist.
Senden Sie PWA-Push-Benachrichtigungen noch heute!
Push-Benachrichtigungen sind ein äußerst effektives, kostengünstiges Marketinginstrument, das Ihnen hilft, wiederkehrenden Traffic, Engagement und Verkäufe automatisch zu steigern.
So installieren Sie PWA-Push-Benachrichtigungen
Das Hinzufügen von Push-Benachrichtigungen zu einer Progressive Web App ist ganz einfach. Folgen Sie einfach den Schritten in diesem Artikel. Wenn Sie jeden Schritt befolgen, sollten Sie am Ende dieses Artikels in der Lage sein, Push-Benachrichtigungen wie diese zu senden:
- Registrieren Sie einen Service Worker am Stammverzeichnis der Website, der PWA-Logik und Push-Verarbeitung kombiniert.
- Installieren Sie das PushEngage-Skript und kopieren Sie den Installationscode in den
<head>. - Konfigurieren Sie das Opt-in-Modal und erstellen Sie eine Kampagne im PushEngage-Dashboard.
Die größte Herausforderung besteht darin, dass alle Web-Push-Benachrichtigungssoftware eine JavaScript-Datei namens service_worker.js verwendet. Der Service Worker hilft Ihnen, Push-Benachrichtigungsabonnenten über Popup-Modale zu sammeln. Aber alle PWAs haben bereits eine Service-Worker-Datei, die einem anderen Zweck dient. Und zu einem Zeitpunkt kann Ihre PWA nur einen Service Worker verwenden.
Einfach ausgedrückt, verwirren Web-Push-Dienste Ihre PWA. Manchmal sammelt sie Push-Benachrichtigungsabonnenten und manchmal nicht. Manchmal können Sie Benachrichtigungen senden und manchmal nicht. Möglicherweise senden Sie sogar Push-Nachrichten an Ihre gesamte Abonnentenliste und diese werden nur an wenige Abonnenten zugestellt.
Wir empfehlen die Verwendung von PushEngage zum Senden von PWA-Push-Benachrichtigungen. PushEngage ist die weltweit führende Push-Benachrichtigungssoftware. Sie können also sicher sein, dass Ihre Kampagnen in sicheren Händen sind.
Natürlich verfügen PWA-Builder wie Mendix über ein eigenes Push-Benachrichtigungssystem. Aber was ist, wenn Sie zu einem anderen Push-Benachrichtigungsdienst wechseln möchten? Was ist, wenn Sie mehr Flexibilität und Kontrolle über Ihre Push-Benachrichtigungskampagnen wünschen? Darüber hinaus bieten diese Dienste normalerweise eine API zum Erstellen von Push-Kampagnen. Aber mit PushEngage erhalten Sie ein einfach zu bedienendes Dashboard, von dem aus Sie Push-Kampagnen erstellen, planen, senden und verwalten können.
Und ja, Sie können Firebase Cloud Messaging (FCM) verwenden, um Push-Benachrichtigungen für Android-Apps zu senden. Mit PushEngage können Sie jedoch Push-Benachrichtigungen für Android-Apps und Web-Apps, Push-Benachrichtigungen für iOS und iPadOS im Web und in Apps sowie Browser-Push-Benachrichtigungen senden.
Das Beste daran? Sie können sogar leistungsstarke E-Commerce-Push-Benachrichtigungen mit wenigen Klicks senden.
| Tatsache | Wert |
|---|---|
| Primärer Zustellmechanismus | Service Worker (Push-Abonnement) |
| Typische Einrichtungszeit | ~10 Minuten (Basis) |
| Häufige Anforderung | Root-scoped service_worker.js + manifest.json |
| Funktioniert auf | Die meisten Desktop-Browser und Android (variiert je nach Plattform) |
Legen wir los.
Schritt #1: Richten Sie Ihr PushEngage-Konto ein
Gehen Sie zur PushEngage-Startseite und klicken Sie auf die Schaltfläche Los geht's:
Sie können PushEngage kostenlos ausprobieren. Wenn Sie einen kleinen Blog betreiben, der wiederkehrenden Traffic und Engagement benötigt, ist das wahrscheinlich ausreichend. Aber wenn es Ihnen um Verkäufe geht, sollten Sie das Enterprise-Paket erwerben und die automatisierten Kampagnen freischalten.
Sobald Sie sich für Ihr PushEngage-Konto angemeldet haben, gehen Sie zu Ihrem PushEngage-Dashboard und navigieren Sie zu Website-Einstellungen » Website-Details:
Hier können Sie Ihr Logo, den Website-Namen und die Website-URL festlegen. Es ist wirklich wichtig, diese Dinge sofort zu regeln, damit Sie später Ihre gesamte Einrichtung testen können.
Schritt #2: Holen Sie sich den Installationscode von PushEngage
Um Push-Benachrichtigungen zu installieren, müssen Sie einen Installationscode erhalten. Scrollen Sie auf Ihrem Bildschirm Website-Einstellungen nach unten und klicken Sie auf die Schaltfläche Klicken Sie hier für Installationsanweisungen:
Klicken Sie dann auf den Tab Beliebige Website:
Sie können den Javascript-Code verwenden, um mit dem Senden von Push-Benachrichtigungen zu beginnen.
Schritt #3: Fügen Sie den Service Worker-Code für PWA-Push-Benachrichtigungen hinzu
Der kniffligste Teil des Prozesses ist endlich da. Im PushEngage-Dashboard unter Setup-Anweisungen sehen Sie auch die Option, die Service-Worker-Datei herunterzuladen.
WICHTIG: Eine PWA kann nur einen aktiven Service-Worker-Scope gleichzeitig haben – fügen Sie den Push-Code in Ihren vorhandenen Service Worker ein. Standardmäßig benötigt eine PWA keine Service-Worker-Datei. Alles, was Sie brauchen, um jede Website in eine Progressive Web App zu verwandeln, ist eine Manifest-Datei. Wenn Ihre PWA also keine Service-Worker-Datei hat, können Sie den PushEngage-Service-Worker einfach in das Stammverzeichnis Ihrer Website oder Web-App einfügen.
Wenn Ihre PWA jedoch bereits einen Service Worker hat, laden Sie die PushEngage-Push-Benachrichtigungs-Service-Worker-Datei NICHT direkt unverändert hoch. Öffnen Sie den PushEngage-Service-Worker in einem Texteditor wie Notepad und kopieren Sie den Code aus der PushEngage-Service-Worker-Datei. Suchen Sie dann die Service-Worker-Datei für Ihre PWA und fügen Sie einfach den PushEngage-Service-Worker-Code in die Datei ein.
Wenn Sie diesen Schritt vernachlässigen, können Sie keine Abonnenten für Push-Benachrichtigungen sammeln.
Schritt 4: Konfigurieren Sie die PushEngage-Opt-In
Gehen Sie nun zurück zu Ihrem PushEngage-Dashboard. Gehen Sie zu Design » Popup-Modals und wählen Sie die Opt-in-Option Ihrer Wahl aus:
Die Idee ist, Ihren Besuchern einen triftigen Grund zum Abonnieren zu geben. Wenn Sie dabei Hilfe benötigen, lesen Sie unseren Artikel über die Erstellung eines benutzerdefinierten Push-Benachrichtigungs-Opt-ins.
Und wenn Sie einige Vorlagen für den Anfang wünschen, sollten Sie sich diesen Artikel über konversionsstarke Push-Benachrichtigungs-Opt-ins ansehen.
Schritt Nr. 5: Erstellen Sie Ihre erste Kampagne
Nachdem Ihre PWA nun Push-Benachrichtigungen senden kann, sollten Sie eine tatsächliche Kampagne erstellen.
Eine Kampagne für abgebrochene Warenkörbe hilft, zusätzliche Einnahmen zu generieren, indem abgebrochene Warenkörbe konvertiert werden. Es ist eine einfache Erinnerung, die viele Produkte automatisch verkauft. Daher ist es eine großartige Kampagne zur Unterstützung jeder Landingpage, die direkte Verkäufe generiert.
Gehen Sie einfach zu Ihrem PushEngage-Dashboard und navigieren Sie zu Kampagnen » Ausgelöste Kampagnen » Neue ausgelöste Kampagne erstellen:
Wählen Sie dann die Kampagnenvorlage Warenkorbabbrüche aus:
Wenn Sie neu in der Erstellung automatisierter Marketingkampagnen sind, können Sie einfach unserem Artikel über die Einrichtung einer Push-Benachrichtigungskampagne für abgebrochene Warenkörbe folgen. Befolgen Sie jeden Schritt, und Sie können Push-Benachrichtigungen wie diese einrichten:
Und nur für den Fall, dass Sie sich fragen: Sie müssen keine bekannte Marke sein, damit Ihre Push-Benachrichtigungskampagnen effektiv sind. Tatsächlich wurde PushEngage entwickelt, um kleinen Unternehmen beim Wachstum mithilfe von Push-Benachrichtigungen zu helfen.
Aber bevor Sie mit der Vermarktung Ihrer Website beginnen, sollten Sie alle Probleme mit Ihrem Push-Benachrichtigungs-Abonnementprozess beheben. Lesen Sie diesen Artikel über das Testen Ihrer Push-Benachrichtigungen. Wenn alles perfekt funktioniert, sind Sie fertig!
Häufig gestellte Fragen
F: Benötigt PWA Push einen Service Worker?
A: Ja. PWA-Push-Nachrichten werden vom registrierten Service Worker zugestellt, der die Behandlung von Push-Ereignissen beinhalten muss.
F: Kann ich PWA Push auf iOS senden?
A: Die iOS-Unterstützung für Service-Worker-basiertes Web-Push ist begrenzt; Android und Desktop-Browser unterstützen PWA Push weitgehend. (Wenn Sie genaue iOS-Statusinformationen haben, ersetzen Sie diese durch eine aktuelle kurze Aussage und geben Sie eine Quelle an.)
F: Was ist der häufigste Integrationsfehler?
A: Hochladen eines separaten Push-Service-Workers in das Stammverzeichnis, ohne ihn mit dem vorhandenen Service-Worker der PWA zu verschmelzen – was zu Konflikten und verpassten Abonnements führt.
Was tun nach dem Hinzufügen von PWA-Push-Benachrichtigungen?
Das war's für dieses Mal, Leute!
Sie können jetzt PWA-Push-Benachrichtigungen senden. Bis jetzt haben Sie auch eine leistungsstarke Web-Push-Benachrichtigungskampagne erstellt, um Ihr Wachstum zu fördern. All das in weniger als 10 Minuten!
Sehen Sie sich an, wie Sie auch andere automatisierte Push-Benachrichtigungskampagnen erstellen können. Die meisten Push-Kampagnen sind einfach und effektiv. Daher empfehlen wir, mehrere Kampagnen für Ihre Website einzurichten. Hier sind einige großartige, um damit zu beginnen:
- Wie man automatisch RSS-Push-Benachrichtigungen versendet
- So richten Sie Warenkorbabbrecher-Push-Benachrichtigungen mit GTM ein
- So planen Sie Push-Benachrichtigungen ganz einfach [5-Minuten-Anleitung]
Und wenn Sie es noch nicht getan haben, legen Sie mit PushEngage los. PushEngage ist die weltweit führende Push-Benachrichtigungssoftware. Ihre Kampagnen sind also in sicheren Händen.
