Web push en iPhone y iPad

Los usuarios de iPhone y iPad con iOS y iPadOS 16.4 o posterior pueden recibir notificaciones web push de su sitio web después de añadirlo a su pantalla de inicio.

Cuándo funciona el web push en iPhone y iPad

El web push en iOS y iPadOS solo funciona para un sitio web abierto desde su icono en la pantalla de inicio. En una pestaña normal de Safari, el navegador no ofrece push en absoluto, por lo que el Web SDK se inicializa sin push y el visitante no puede suscribirse.

Para recibir notificaciones, el usuario necesita:

Un iPhone o iPad con iOS o iPadOS 16.4 o posterior.
Su sitio web añadido a la pantalla de inicio y abierto desde ese icono.
Las notificaciones permitidas en respuesta a un toque en su sitio.

Qué necesita su sitio web

Integre el Web SDK de la misma forma que para los navegadores de escritorio y, a continuación, añada un manifiesto de aplicación web:

Integre el SDK y el service worker siguiendo Web push SDK 3.0. Si su sitio ya tiene su propio service worker, siga Soporte para Progressive Web App.

Añada un manifiesto de aplicación web con display establecido en standalone o fullscreen y enlácelo desde todas las páginas:

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

Solicite el permiso de notificaciones a partir de un toque del usuario. iOS y iPadOS muestran el diálogo de permiso solo en respuesta a una acción directa del usuario, así que use el Widget de suscripción o un botón que llame a Pushwoosh.subscribe():
```
<button onclick="Pushwoosh.subscribe()">Get notifications</button>
```

Cómo encontrar a los suscriptores de iPhone y iPad en Pushwoosh

Pushwoosh registra a los suscriptores web de iPhone y iPad en la plataforma Chrome, por lo que las estadísticas no los muestran por separado y ninguna etiqueta predeterminada identifica el dispositivo de forma fiable.

Para dirigirse a estos suscriptores, establezca una etiqueta propia desde el sitio web:

Cree una etiqueta personalizada en el Control Panel antes de que el sitio la envíe, por ejemplo, una etiqueta de tipo String llamada Web App Platform. Desmarque la casilla Específico del usuario, que está seleccionada por defecto. Así se crea una etiqueta General, almacenada por dispositivo.

Sin este paso, setTags crea la etiqueta automáticamente como Específico del usuario. Su valor lo comparten todos los dispositivos con el mismo User ID, por lo que, una vez que el sitio llama a registerUser, el navegador de escritorio del usuario también obtiene ios y recibe los mensajes que usted dirige a los suscriptores de iPhone y iPad con esta etiqueta.

Establezca la etiqueta cuando el sitio se ejecute desde la pantalla de inicio en iPhone o 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' });
  }
});

Suscríbase desde un iPhone o iPad de prueba.
Compruebe el valor de la etiqueta en ese dispositivo en el Explorador de usuarios. setTags devuelve éxito incluso cuando Pushwoosh no guarda el valor, por ejemplo, cuando la creación automática de etiquetas está desactivada para la cuenta, por lo que el código por sí solo no confirma que se haya guardado.
Cree un segmento a partir de esta etiqueta para enviar un mensaje solo a los suscriptores de iPhone y iPad.