Web push en iPhone: requisitos de iOS 16.4 y cómo guiar al usuario

Sí, puedes enviar notificaciones web a un iPhone, pero solo desde iOS 16.4 y solo si el usuario ha añadido tu web a la pantalla de inicio y la abre desde ese icono. En una pestaña normal de Safari la API de notificaciones ni siquiera existe, así que tu trabajo es detectar ese caso y explicar la instalación en pocos pasos claros.

En resumen:

• Necesitas iOS o iPadOS 16.4 o posterior, y la web debe abrirse desde su icono en la pantalla de inicio.
• De iOS 16.4 a iOS 18 la web necesita un manifest con display en standalone o fullscreen; desde iOS 26 cualquier web añadida se abre como app, pero el manifest sigue siendo recomendable.
• En una pestaña de Safari no existen Notification ni PushManager: si solo compruebas soporte, esconderás el botón a todos los usuarios de iPhone.
• El permiso se pide dentro de la web instalada y siempre desde un toque del usuario.
• iOS no ofrece un aviso de instalación automático: tienes que explicarlo tú.

Los requisitos, uno por uno

Apple publicó las condiciones en el anuncio de web push para apps web en iOS y iPadOS. Resumidas:

No necesitas cuenta de Apple Developer ni certificados: es el mismo Web Push estándar con claves VAPID que usas con Chrome o Firefox, con endpoints en web.push.apple.com. Si tu servidor filtra los dominios de endpoint que acepta, permite cualquier subdominio de push.apple.com. Una vez suscrito, el usuario recibe las notificaciones como las de una app nativa: en la pantalla bloqueada, en el centro de notificaciones y en un Apple Watch emparejado, respetando sus modos de concentración.

Por qué en Safari no aparece el permiso

El fallo más habitual no es técnico, sino de diseño. Muchas webs muestran el botón de avisos así:

if ('Notification' in window && 'PushManager' in window) {
  showNotifyButton();
}

En una pestaña de Safari en iPhone, window.Notification no existe, la condición es falsa y el botón no aparece nunca. El usuario no sabe que tu web puede avisarle y tú pierdes ese canal con todos los visitantes de iPhone. En lugar de esconder la función, distingue tres casos: el navegador admite push (muestra el botón), es un iPhone o iPad sin instalar (muestra los pasos de instalación) o no hay soporte (no muestres nada):

const ua = navigator.userAgent;
const isIOS = /iPhone|iPad|iPod/.test(ua) ||
  (/Macintosh/.test(ua) && navigator.maxTouchPoints > 1); // iPadOS se presenta como Mac
const isInstalled = window.matchMedia('(display-mode: standalone)').matches ||
  navigator.standalone === true;

if (isIOS && !isInstalled) showInstallSteps();
else if ('PushManager' in window) showNotifyButton();

Si usas castly, Castly.needsInstall() hace esta comprobación por ti: devuelve true en Safari de iPhone o iPad cuando la web no está instalada.

El manifest mínimo

Sirve un archivo de manifest y enlázalo desde el <head> de todas tus páginas:

{
  "name": "Tienda Ejemplo",
  "short_name": "Tienda",
  "id": "/",
  "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.webmanifest">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

El campo decisivo es display. Sin standalone o fullscreen, iOS 16.4 a 18 guarda la web como un simple marcador que se abre en Safari, y ahí no hay push. iOS 26 cambió el comportamiento por defecto: cualquier web añadida a la pantalla de inicio se abre como app aunque no tenga manifest, salvo que el usuario desactive esa opción al añadirla. Aun así, mantén el manifest: lo necesitan quienes siguen en versiones anteriores y define el nombre, el icono y la URL de inicio. El campo id identifica la app instalada, y iOS lo usa junto al nombre para sincronizar los modos de concentración entre dispositivos. Si quieres ir más allá, tienes la guía para hacer tu web instalable como PWA.

Cómo guiar al usuario para instalar la web

Como iOS no ofrece la instalación por su cuenta, la explicación la pones tú. Muéstrala cuando el usuario ya ha pedido los avisos, por ejemplo al tocar «Avisarme cuando salga mi pedido», y no al cargar la página. Tres pasos bastan:

1. Toca el botón Compartir de Safari, el cuadrado con una flecha hacia arriba. En algunas versiones está dentro del menú «…».
2. Elige «Añadir a pantalla de inicio» y confirma con «Añadir».
3. Abre la web desde el nuevo icono y vuelve a tocar «Activar notificaciones».

Algunos detalles marcan la diferencia:

• Empieza por el beneficio en una frase: «Instala la web para recibir el aviso de entrega en tu iPhone».
• Usa las palabras exactas que verá el usuario en pantalla y, si puedes, una flecha que señale la barra de Safari.
• Deja cerrar la explicación y no la repitas en cada visita: guarda la fecha en localStorage y espera unos días.
• Desde iOS 16.4, otros navegadores pueden ofrecer «Añadir a pantalla de inicio» en su propio menú de compartir si lo implementan; si detectas uno de ellos, adapta el texto.

Después de instalar: el permiso dentro de la app

Cuando el usuario abre la web desde el icono, está en un contexto nuevo. Ten en cuenta tres cosas:

• La sesión puede no acompañarle. La web instalada suele tener su propio almacenamiento, separado del de Safari, así que no des por hecho que seguirá con la sesión iniciada. Si asocias suscripciones a usuarios, pide el inicio de sesión antes de suscribir o asocia la suscripción al iniciar sesión.
• El permiso necesita un toque. Pídelo directamente en el manejador del clic. Si antes encadenas peticiones lentas, el navegador puede dejar de considerarlo una acción del usuario.
• Si dice que no, la vuelta atrás está en Ajustes. iOS muestra su diálogo del sistema y, si el usuario lo rechaza, solo puede reactivarlo en Ajustes > Notificaciones > (nombre de tu web). Detecta el estado denied y explícalo en vez de insistir.

button.addEventListener('click', async () => {
  const permission = await Notification.requestPermission();
  if (permission === 'granted') await subscribeAndSave(); // pushManager.subscribe() + POST a tu API
  else if (permission === 'denied') showSettingsHelp();
});

El momento y el texto de esa petición importan tanto como en escritorio; lo desarrollamos en cuándo pedir permiso para notificaciones.

Cómo probarlo en un iPhone real

1. Publica la web en un dominio con HTTPS válido. El iPhone no puede usar el localhost de tu ordenador, así que usa un entorno de pruebas o un túnel.
2. Añádela a la pantalla de inicio, ábrela desde el icono y suscríbete.
3. Envía un push de prueba y bloquea el teléfono: debería aparecer en la pantalla bloqueada. Si no llega, comprueba que no haya un modo de concentración activo.
4. Para depurar el service worker, activa Ajustes > Safari > Avanzado > Inspector web, conecta el iPhone a un Mac por cable y usa el menú Desarrollo de Safari en el Mac.

Cada instalación genera su propia suscripción. Si el usuario borra el icono y vuelve a instalar la web, tendrás un endpoint nuevo y lo normal es que el antiguo deje de funcionar, así que tu servidor debe eliminar las suscripciones que respondan 404 o 410. En el Playground del panel de castly puedes suscribir tu propio iPhone como dispositivo de prueba y enviarle un push; la guía de inicio rápido explica la integración completa.

Preguntas frecuentes

¿Funciona web push en Chrome o Firefox para iPhone?

En una pestaña normal, no: los navegadores de iOS basados en WebKit, que son prácticamente todos, no ofrecen web push dentro del navegador. Desde iOS 16.4 pueden añadir webs a la pantalla de inicio si implementan esa opción, y la web instalada recibe push igual que si se hubiera añadido desde Safari.

¿Funciona en la Unión Europea?

Sí. En 2024 Apple anunció que retiraría las webs de pantalla de inicio en la UE con iOS 17.4, pero dio marcha atrás antes de publicar la versión final y las mantuvo, push incluido. El funcionamiento es el mismo que en el resto del mundo.

¿Puedo mostrar un número en el icono de la web instalada?

Sí. Desde iOS 16.4 las webs de pantalla de inicio admiten la Badging API: llama a navigator.setAppBadge(3) desde la página o al procesar un push en el service worker, y a navigator.clearAppBadge() para quitarlo. El número solo se ve si el usuario ha permitido las notificaciones.

¿Puedo mostrar un aviso de instalación automático como en Android?

No. iOS no dispara beforeinstallprompt ni permite instalar la web desde JavaScript. Lo único que puedes hacer es detectar que el usuario está en Safari sin instalar y enseñarle los pasos.

¿Y en Safari para Mac?

En macOS es distinto: Safari admite web push en pestañas normales desde macOS 13 Ventura, sin instalar nada. Lo contamos en web push en Safari para macOS.