Web push sur iPhone et iPad

Les utilisateurs d’iPhone et d’iPad sous iOS et iPadOS 16.4 ou version ultérieure peuvent recevoir les notifications web push de votre site web après l’avoir ajouté à leur écran d’accueil.

Quand le web push fonctionne sur iPhone et iPad

Le web push sur iOS et iPadOS ne fonctionne que pour un site web ouvert depuis son icône sur l’écran d’accueil. Dans un onglet Safari classique, le navigateur ne propose pas du tout le push : le Web SDK s’initialise donc sans push et le visiteur ne peut pas s’abonner.

Pour recevoir des notifications, l’utilisateur a besoin :

D’un iPhone ou d’un iPad sous iOS ou iPadOS 16.4 ou version ultérieure.
De votre site web ajouté à l’écran d’accueil et ouvert depuis cette icône.
D’avoir autorisé les notifications en réponse à un toucher sur votre site.

Ce dont votre site web a besoin

Intégrez le Web SDK de la même manière que pour les navigateurs de bureau, puis ajoutez un manifeste d’application web :

Intégrez le SDK et le service worker en suivant SDK Web Push 3.0. Si votre site possède déjà son propre service worker, suivez Prise en charge des Progressive Web App.

Ajoutez un manifeste d’application web avec display défini sur standalone ou fullscreen, et liez-le depuis chaque page :

{
  "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">

Demandez l’autorisation des notifications à partir d’un toucher de l’utilisateur. iOS et iPadOS n’affichent la boîte de dialogue d’autorisation qu’en réponse à une action directe de l’utilisateur : utilisez donc le Widget d’abonnement ou un bouton qui appelle Pushwoosh.subscribe() :
```
<button onclick="Pushwoosh.subscribe()">Get notifications</button>
```

Comment retrouver les abonnés iPhone et iPad dans Pushwoosh

Pushwoosh enregistre les abonnés web sur iPhone et iPad sous la plateforme Chrome : les statistiques ne les affichent donc pas séparément et aucun tag par défaut n’identifie l’appareil de manière fiable.

Pour cibler ces abonnés, définissez votre propre tag depuis le site web :

Créez un tag personnalisé dans le Control Panel avant que le site ne l’envoie, par exemple un tag String nommé Web App Platform. Décochez la case Spécifique à l’utilisateur, cochée par défaut. Vous obtenez ainsi un tag Général, stocké par appareil.

Sans cette étape, setTags crée automatiquement le tag en tant que tag Spécifique à l’utilisateur. Sa valeur est partagée par tous les appareils ayant le même User ID : dès que le site appelle registerUser, le navigateur de bureau de l’utilisateur reçoit lui aussi ios et reçoit les messages que vous ciblez sur les abonnés iPhone et iPad avec ce tag.

Définissez le tag lorsque le site s’exécute depuis l’écran d’accueil sur iPhone ou iPad :

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' });
  }
});

Abonnez-vous depuis un iPhone ou un iPad de test.
Vérifiez la valeur du tag sur cet appareil dans l’Explorateur d’utilisateurs. setTags renvoie un succès même lorsque Pushwoosh n’enregistre pas la valeur, par exemple lorsque la création automatique de tags est désactivée pour le compte : le code seul ne confirme donc pas que la valeur a été enregistrée.
Créez un segment sur ce tag pour envoyer un message uniquement aux abonnés iPhone et iPad.