Hinweis: Für diesen Artikel sind keine älteren Dokumentationen verfügbar, daher sehen Sie die aktuelle Dokumentation.
Apple hat iOS und iPadOS 16.4 veröffentlicht, das Web-Push-Benachrichtigungen für Web-Apps unterstützt, die auf dem Home-Bildschirm von iPhone- und iPad-Geräten hinzugefügt wurden. In dieser Anleitung helfen wir Ihnen, Ihre Website einzurichten, um Benachrichtigungen an iPhone- und iPad-Benutzer zu senden, die Ihre Website besuchen.
Erschließen Sie unbegrenzte Reichweite auf iOS-Geräten. Verpassen Sie nicht den Schwung.
Richten Sie sich noch heute ein und holen Sie Ihre Website-Besucher zurück, bevor sie Sie vergessen. Starten Sie kostenlos, senden Sie intelligenter und wachsen Sie mit einem Plan, der zu Ihrer Website passt.
Web-Push-Benachrichtigungen sind für den Safari-Browser, Google Chrome und Edge auf iPhone und iPad mit iOS und iPadOS 16.4 verfügbar. iOS erfordert, dass der Benutzer Ihre Website zu seinem Home-Bildschirm hinzufügt und dann die Web-App durch Tippen auf ihr Symbol öffnet. Die Web-App öffnet sich wie jede andere native App unter iOS oder iPadOS, anstatt in einem Browser geöffnet zu werden. Benutzer können die Berechtigung zum Empfangen von Push-Benachrichtigungen erteilen und diese Berechtigungen dann in den Benachrichtigungseinstellungen verwalten, genau wie jede andere App auf dem iPhone und iPad.
Bevor Sie beginnen
Sie benötigen einige Dinge, damit die Web-Push-Kampagnen auf iOS-Geräten laufen.
- Ihre Web-App muss eine Web Application Manifest-Datei (manifest.json) mit dem Member `display` auf `standalone` oder `fullscreen` gesetzt bereitstellen.
- Die Benutzer müssen auf iOS oder iPadOS 16.4 oder neuer sein.
- Der Benutzer muss die Web-App auf seinem Home-Bildschirm installieren, indem er auf die Schaltfläche Teilen tippt, um das Teilen-Menü zu öffnen, und dann auf "Zum Home-Bildschirm hinzufügen" tippt.
- Eine Benutzerinteraktion, wie ein Klick oder Tippen auf eine Schaltfläche, ist erforderlich, um die native Berechtigungsaufforderung anzuzeigen und die Berechtigung zum Empfangen von Push-Benachrichtigungen zu erteilen.
Wenn Ihre Website bereits eine Progressive Web App (PWA) ist, müssen Sie keine zusätzlichen Updates durchführen, um sich auf iOS/iPadOS Web Push vorzubereiten. Wenn Sie sich nicht sicher sind, ob Ihre Website eine PWA ist, wenden Sie sich an Ihr Entwicklungsteam oder verwenden Sie Lighthouse in Chrome DevTools.
Einrichtung Ihrer Website für iOS und iPadOS Web Push Benachrichtigungen
Befolgen Sie die Schritte, um Push-Benachrichtigungen für Safari auf dem iPhone und iPad zu aktivieren und zu senden:
- 1. Fügen Sie Ihrer Website eine Web App Manifest-Datei hinzu.
- 2. Integrieren Sie PushEngage auf Ihrer Website.
- 3. Stellen Sie Ihr Website-Manifest bereit und testen Sie es.
- 4. Testen Sie das Abonnement-Dialogfeld und die Berechtigungsaufforderung.
1. Fügen Sie Ihrer Website eine Web App Manifest-Datei hinzu
Das Web App Manifest ist eine JSON-Datei, die dem Browser Informationen über Ihre Progressive Web App (PWA) liefert und wie sie auf dem Desktop- oder Mobilgerät des Benutzers aussehen und sich verhalten soll. Sie enthält Metadaten wie den Namen Ihrer Web-App, die Beschreibung, Symbole, das Farbschema und die URL, die beim Starten der App geöffnet werden soll.
Sie können jedes Online-Tool verwenden, um schnell eine Manifestdatei zu generieren. Die Manifestdatei kann jeden Namen haben, wird aber üblicherweise manifest.json genannt und sollte in das Stammverzeichnis Ihrer Website hochgeladen werden. Wenn Sie Hilfe beim Hinzufügen von Code zu Ihrer WordPress-Site benötigen, versuchen Sie das WPCode Plugin.
Ein typisches Manifest sieht ungefähr so aus:
{
"name": "PushEngage",
"short_name": "PushEngage",
"start_url": "/",
"display": "standalone",
"theme_color": "#3b43ff",
"background_color": "#ffffff",
"icons": [
{
"src": "icon/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "img/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "img/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Hinweis: Der Wert des Members display im Manifest muss auf standalone oder fullscreen gesetzt sein.
Nachdem Sie die Manifestdatei erstellt haben, verweisen Sie im HTML-Code Ihrer Website mit einem <link>-Tag im <head>-Bereich der Seite auf das Manifest.
Beispiel:
<link rel="manifest" href="/manifest.json">
2. PushEngage auf Ihrer Website integrieren
Der nächste Schritt ist die Integration von PushEngage auf Ihrer Website, um die Registrierung und Installation des Service Workers auf der Seite zu verwalten.
Wenn Sie die Installation noch nicht abgeschlossen haben, finden Sie hier eine Anleitung zur Installation von PushEngage. Wenn Sie WordPress-Benutzer sind, können Sie das PushEngage WordPress Plugin verwenden, das die Registrierung des Service Workers übernimmt.
Sie können die hier genannten Schritte befolgen, wenn Sie bereits Ihren Service Worker haben und ihn mit dem Service Worker von PushEngage zusammenführen müssen.
3. Manifest Ihrer Website bereitstellen und testen
Sobald Sie das Manifest hochgeladen und PushEngage integriert haben, besteht der nächste Schritt darin, Ihre Web-App zu testen, um sicherzustellen, dass Ihr Web-App-Manifest korrekt implementiert wurde. Sie können Ihre Website auf verschiedenen Geräten und Browsern testen, indem Sie sie zu Ihrem Startbildschirm hinzufügen.
Befolgen Sie diese Schritte:
- 1. Öffnen Sie die Website im Safari-Browser unter iOS 16.4 oder höher.
- 2. Klicken Sie auf die Schaltfläche „Teilen“, um das Freigabemenü zu öffnen.
- 3. Klicken Sie auf die Option „Zum Startbildschirm hinzufügen“.
- 4. Speichern Sie die App auf Ihrem Startbildschirm.
Wenn Ihre Website erfolgreich für Web-Push konfiguriert wurde, wird die Web-App wie jede andere App unter iOS oder iPadOS geöffnet, anstatt im Browser geöffnet zu werden und lediglich als Verknüpfung zu dienen.
Sie sollten Ihre Benutzer informieren, indem Sie ein Banner auf dem App-Bildschirm anzeigen, das den Benutzer auffordert, Ihre App zum Startbildschirm seines iOS-Geräts hinzuzufügen und sich für die Web-Push-Benachrichtigungen anzumelden.
4. Dialogfeld für Abonnement testen
Eine Home-Screen-Web-App unter iOS und iPadOS erfordert eine direkte Benutzerinteraktion, z. B. das Tippen auf eine Schaltfläche auf der Seite, um das Dialogfeld für Abonnementberechtigungen anzuzeigen. Befolgen Sie diese Schritte, um zu testen, ob die Berechtigungsaufforderung funktioniert:
- 1. Öffnen Sie die Web-App, indem Sie auf das App-Symbol auf dem Startbildschirm Ihres Geräts tippen.
- 2. Warten Sie, bis das PushEngage-Dialogfeld für Abonnements auf der Seite erscheint.
- 3. Klicken Sie auf die Schaltfläche „Zulassen“ im PushEngage-Popup-Modal, um die Berechtigungsaufforderung anzuzeigen.
- 4. Klicken Sie auf die Schaltfläche „Zulassen“ in der Berechtigungsaufforderung.
Hinweis: Das Dialogfeld für Abonnements wird nur angezeigt, wenn Ihre Website HTTPS verwendet und die App vom Startbildschirm aus gestartet wurde. Sie können das Design und Verhalten des Dialogfelds für Abonnements im PushEngage-Dashboard anpassen.
Web-Push-Kampagne an iOS- und iPadOS-Benutzer senden
Nachdem Sie die oben genannten Schritte für iOS- und iPadOS-Web-Push-Benachrichtigungen abgeschlossen haben, können Sie nun mit dem Senden einer Push-Benachrichtigung über das PushEngage-Dashboard beginnen.
Web-Push-Benachrichtigungen auf iOS funktionieren ähnlich wie bei anderen nativen Apps. Web-Push-Benachrichtigungen werden auf dem Bildschirm als Heads-up-Benachrichtigung, im Benachrichtigungscenter und auch auf dem Sperrbildschirm angezeigt. Benutzer können ihre Benachrichtigungseinstellungen auch in den iOS-Einstellungen verwalten. Sobald Sie auf die Benachrichtigung klicken, gelangen Sie zur gewünschten Landingpage innerhalb der Web-App.
Die Struktur einer iOS Web-Push-Benachrichtigung
iOS Safari Push-Benachrichtigungen unterstützen derzeit keine Rich Media, animierten GIFs oder Videos. Sobald diese Funktionen hinzugefügt werden, werden wir sie ebenfalls aktivieren. Bitte befolgen Sie die nachstehenden Richtlinien, um Ihre Benachrichtigungen für iOS-Benutzer zu erstellen.
Web-Push-Benachrichtigungen auf iOS und iPadOS umfassen die folgenden Elemente:
- 1. Icon – Das im Manifest definierte Icon. Es kann nicht für einzelne Nachrichten geändert werden.
- 2. Titel – Der Titel ist auf 30-40 Zeichen beschränkt, danach wird er abgeschnitten.
- 3. App-Name – Der App-Name ist im Manifest angegeben und kann nicht für einzelne Nachrichten geändert werden.
- 4. Nachricht – Der Text ist auf 120-150 Zeichen beschränkt, danach wird er abgeschnitten.
- 5. Zeitstempel – Dieser zeigt an, wie lange die Benachrichtigung bereits an das Gerät geliefert wurde.
Das ist alles, was Sie brauchen, um Abonnenten zu sammeln und Kampagnen an Ihre iPhone- und iPad-Benutzer zu senden.
Wenn Sie auf Probleme stoßen, kontaktieren Sie uns bitte hier. Unser Support-Team wird Ihnen helfen können.
