Web Push auf iPhone und iPad

iPhone- und iPad-Benutzer unter iOS und iPadOS 16.4 oder höher können Web-Push-Benachrichtigungen von Ihrer Website erhalten, nachdem sie diese zu ihrem Home-Bildschirm hinzugefügt haben.

Wann Web Push auf iPhone und iPad funktioniert

Web Push unter iOS und iPadOS funktioniert nur für eine Website, die über ihr Symbol auf dem Home-Bildschirm geöffnet wird. In einem normalen Safari-Tab bietet der Browser überhaupt kein Push an, daher wird das Web SDK ohne Push initialisiert und der Besucher kann sich nicht abonnieren.

Um Benachrichtigungen zu erhalten, benötigt der Benutzer:

Ein iPhone oder iPad mit iOS oder iPadOS 16.4 oder höher.
Ihre Website, die zum Home-Bildschirm hinzugefügt und über dieses Symbol geöffnet wurde.
Erlaubte Benachrichtigungen als Reaktion auf ein Tippen auf Ihrer Website.

Was Ihre Website benötigt

Integrieren Sie das Web SDK auf die gleiche Weise wie für Desktop-Browser und fügen Sie dann ein Web-App-Manifest hinzu:

Integrieren Sie das SDK und den Service Worker gemäß Web Push SDK 3.0. Wenn Ihre Website bereits einen eigenen Service Worker hat, folgen Sie Unterstützung für Progressive Web Apps.

Fügen Sie ein Web-App-Manifest hinzu, in dem display auf standalone oder fullscreen gesetzt ist, und verlinken Sie es auf jeder Seite:

{
  "name": "Example Store",
  "short_name": "Store",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

<link rel="manifest" href="/manifest.json">

Fragen Sie die Benachrichtigungsberechtigung nach einem Tippen des Benutzers an. iOS und iPadOS zeigen den Berechtigungsdialog nur als Reaktion auf eine direkte Benutzeraktion an. Verwenden Sie daher das Abonnement-Widget oder eine Schaltfläche, die Pushwoosh.subscribe() aufruft:
```
<button onclick="Pushwoosh.subscribe()">Get notifications</button>
```

So finden Sie iPhone- und iPad-Abonnenten in Pushwoosh

Pushwoosh registriert Web-Abonnenten auf iPhone und iPad unter der Chrome-Plattform. Daher werden sie in den Statistiken nicht separat angezeigt, und kein Standard-Tag identifiziert das Gerät zuverlässig.

Um diese Abonnenten gezielt anzusprechen, setzen Sie von der Website aus ein eigenes Tag:

Erstellen Sie ein benutzerdefiniertes Tag im Control Panel, bevor die Website es sendet, zum Beispiel ein String-Tag namens Web App Platform. Deaktivieren Sie das Kontrollkästchen Benutzerspezifisch, das standardmäßig aktiviert ist. So entsteht ein allgemeines Tag, das pro Gerät gespeichert wird.

Ohne diesen Schritt erstellt setTags das Tag automatisch als benutzerspezifisches Tag. Sein Wert wird von allen Geräten mit derselben User ID geteilt. Sobald die Website also registerUser aufruft, erhält auch der Desktop-Browser des Benutzers ios und empfängt die Nachrichten, die Sie mit diesem Tag an iPhone- und iPad-Abonnenten richten.

Setzen Sie das Tag, wenn die Website auf dem iPhone oder iPad vom Home-Bildschirm aus läuft:

Pushwoosh.push((api) => {
  // iPadOS Safari reports a Mac user agent, so a touch screen marks an iPad
  const isIos = /iPhone|iPad/.test(navigator.userAgent)
    || (/Macintosh/.test(navigator.userAgent) && navigator.maxTouchPoints > 1);
  const isIosHomeScreen = isIos && (window.navigator.standalone === true
    || window.matchMedia('(display-mode: standalone)').matches);

  if (isIosHomeScreen) {
    api.setTags({ 'Web App Platform': 'ios' });
  }
});

Abonnieren Sie von einem Test-iPhone oder -iPad aus.
Prüfen Sie den Tag-Wert auf diesem Gerät im User Explorer. setTags meldet auch dann Erfolg, wenn Pushwoosh den Wert nicht speichert, zum Beispiel wenn die automatische Tag-Erstellung für das Konto deaktiviert ist. Der Code allein bestätigt also nicht, dass der Wert gespeichert wurde.
Erstellen Sie ein Segment auf Basis dieses Tags, um eine Nachricht nur an iPhone- und iPad-Abonnenten zu senden.