Saltar al contenido principal
Apple comenzó a soportar notificaciones push en iOS e iPadOS 16.4+ para aplicaciones web agregadas a la pantalla de inicio de un usuario. Esta funcionalidad funciona en navegadores Safari, Chrome y Edge, abriendo nuevas oportunidades de compromiso para empresas web-first. Esta guía completa cubre todo lo que necesitas para implementar notificaciones web push de iOS con éxito.

Example web push notification on mobile.

​
Actualizaciones importantes para 2025

Soporte multi-navegador: Las notificaciones web push ahora funcionan en todos los navegadores principales en iOS/iPadOS 16.4+ incluyendo Safari, Chrome y Edge. Mejoras de iOS 17+: Implementación mejorada con APIs relevantes habilitadas por defecto, haciendo que web push sea más accesible para los usuarios. Consideraciones de confiabilidad: Algunos desarrolladores reportan problemas ocasionales de confiabilidad donde las notificaciones web push de iOS pueden funcionar inicialmente pero luego detenerse inesperadamente. Monitorea tus tasas de entrega de notificaciones y ten estrategias de compromiso de respaldo en su lugar.

​
Requisitos

  • Versión iOS/iPadOS: 16.4 o superior
  • Origen HTTPS: Conexión segura con diseño responsivo
  • Manifest de aplicación web: Archivo manifest.json válido con configuraciones correctas
  • Instalación en pantalla de inicio: La aplicación web debe agregarse a la pantalla de inicio del usuario desde cualquier navegador soportado
  • Acción iniciada por usuario: El usuario debe interactuar con tu sitio antes de que puedan aparecer prompts de permiso
  • Service Worker de OneSignal: Requerido para entrega de notificaciones

​
Verificación de Progressive Web App (PWA)

Si tu sitio web ya es una Progressive Web App (PWA), no se necesitan actualizaciones adicionales del sitio. Usa Lighthouse en Chrome DevTools para auditar si tu sitio califica como PWA.

​
Configuración

​
1. Crear tu manifest de aplicación web

Un Manifest de Aplicación Web (manifest.json) es un archivo JSON que define cómo tu aplicación web aparece y se comporta cuando se instala en el dispositivo de un usuario. Para web push de iOS, este archivo es obligatorio.

​
Campos requeridos del manifest

Tu manifest.json debe incluir estos campos esenciales:
  • $schema (recomendado): URL de esquema JSON para validación y soporte de IDE
  • name (requerido): Nombre completo de la aplicación mostrado a los usuarios
  • display (requerido): Debe establecerse en "standalone" o "fullscreen" para compatibilidad con iOS
  • start_url (requerido): URL de punto de entrada cuando la aplicación se inicia
  • icons (requerido): Array de objetos de icono con múltiples tamaños
  • id (recomendado): Identificador único que permite múltiples instancias de app

​
Archivo manifest de ejemplo

{
  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
  "name": "OneSignal Manifest Example",
  "short_name": "OS Manifest",
  "display": "standalone",
  "start_url": "/",
  "theme_color": "#E54B4D",
  "background_color": "#ffffff",
  "icons": [
    { "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-256x256.png", "sizes": "256x256", "type": "image/png" },
    { "src": "/icon-384x384.png", "sizes": "384x384", "type": "image/png" },
    { "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "id": "?homescreen=1"
}

​
Pasos de implementación

  1. Colocación de archivo: Coloca manifest.json en el directorio raíz de tu sitio web
  2. Integración HTML: Agrega esta etiqueta link a la sección <head> de todas las páginas:
<link rel="manifest" href="/manifest.json"/>
  1. Preparación de iconos: Crea iconos PNG de alta calidad en múltiples tamaños (se recomiendan 192x192, 256x256, 384x384, 512x512 píxeles)
Usa herramientas como SimiCart Manifest Generator para crear archivos manifest rápidamente, o valida los existentes con Manifest Tester.

​
2. Agregar el service worker de OneSignal

Si ya completaste nuestra configuración SDK Web y puedes recibir notificaciones web push en otros navegadores, este paso está completo. Ver documentación Service Worker de OneSignal para instrucciones detalladas de configuración.

​
3. Configurar prompts de permiso

Los prompts de permiso Web existentes de tu configuración SDK Web funcionarán en dispositivos iOS solo después de que los usuarios agreguen tu sitio a su pantalla de inicio y lo abran desde allí. Este es un requisito de diseño de Apple.

​
4. Guiar a los usuarios a “Agregar a pantalla de inicio”

A diferencia de dispositivos de escritorio o Android donde los prompts de permiso aparecen según tu configuración, iOS requiere un recorrido de usuario específico que debes facilitar.

​
El recorrido de usuario requerido

Los usuarios deben completar estos pasos para recibir notificaciones:
  1. Visitar tu sitio web en Safari, Chrome o Edge en iOS/iPadOS 16.4+
  2. Hacer clic en el botón Compartir del navegador
  3. Seleccionar la opción Agregar a pantalla de inicio
  4. Guardar la aplicación en su dispositivo
  5. Abrir la aplicación desde la pantalla de inicio (no desde el navegador)
  6. Interactuar con tu botón de suscripción para activar el prompt de permiso nativo

Adding a Website to the Home Screen on iOS

​
Estrategias de incorporación de usuarios

Dado que este proceso no es intuitivo, implementa orientación clara a través de:
  • Banners del sitio web: Muestra banners específicamente en dispositivos móviles Apple explicando el valor de las notificaciones y proporcionando instrucciones paso a paso.
  • Guías visuales: Usa capturas de pantalla y flechas para mostrar a los usuarios exactamente dónde tocar.
  • Tiempo: Presenta la orientación después de que los usuarios hayan demostrado compromiso con tu contenido.

​
Ejemplos de implementación

Aquí hay enfoques efectivos de aplicaciones reales:

Ejemplo de banner solicitando a usuarios agregar a pantalla de inicio

Orientación visual paso a paso

Mensajería enfocada en beneficios

Llamado a la acción claro con señales visuales

​
Soluciones de código abierto

Considera implementar esta popular solución de banner de código abierto: Proyecto GitHub: add-to-home-screen by rajatsehgal

Ejemplo de un prompt de banner Agregar a pantalla de inicio de un proyecto de código abierto por rajatsehgal.

Ejemplos adicionales de banners y mejores prácticas disponibles en web.dev.

​
5. Pruebas y validación

​
Pruebas del archivo manifest

  1. Verificación de accesibilidad: Navega a https://yoursite.com/manifest.json para asegurar accesibilidad pública
  2. DevTools del navegador:
    • Abre Chrome DevTools (F12)
    • Ve a la pestaña Application → Manifest
    • Revisa cualquier error o advertencia
  3. Validadores en línea:

​
Pruebas de notificaciones push de extremo a extremo

  1. Visita tu sitio web en un dispositivo iOS 16.4+ usando Safari, Chrome o Edge
  2. Haz clic en el botón Compartir del navegador
  3. Selecciona Agregar a pantalla de inicio
  4. Guarda la aplicación en tu dispositivo
  5. Abre la aplicación desde la pantalla de inicio (paso crucial)
  6. Activa tu botón de suscripción - el prompt de permiso nativo debería aparecer
  7. Otorga permiso y prueba la entrega de notificaciones

​
Notas importantes de prueba

Requisitos para volver a probar: Para probar nuevamente en el mismo dispositivo:
  • Elimina la aplicación de la pantalla de inicio
  • Limpia el caché del navegador (Configuración > Safari/Chrome/Edge > Limpiar caché)
  • Repite el proceso
Recuperación de permiso denegado: Si el permiso es denegado, la aplicación de pantalla de inicio debe ser eliminada y agregada nuevamente para que el prompt de permiso aparezca otra vez. Problemas comunes a verificar:
  • Asegúrate de que el campo display sea "standalone" o "fullscreen"
  • Verifica que todas las rutas de iconos sean accesibles
  • Confirma que el manifest se sirva con el tipo MIME correcto (application/manifest+json)
  • Prueba errores CORS

​
Solución de problemas

Manifest no se carga: Verifica la ruta del archivo, el requisito de HTTPS y la configuración del tipo MIME en tu servidor. Iconos no se muestran: Verifica la accesibilidad del archivo de icono y las especificaciones de tamaño correctas en el manifest. Prompt de permiso no aparece: Asegúrate de que el usuario accedió al sitio a través de la aplicación de pantalla de inicio y hizo clic en un elemento interactivo primero. Notificaciones no se entregan: Verifica que el service worker de OneSignal esté instalado correctamente y revisa la consola del navegador para errores.

​
Siguientes pasos

¡Ahora estás listo para enviar notificaciones! Continúa a la documentación de Push o usa nuestra API Create message para comenzar a interactuar con tus usuarios de iOS con notificaciones web push.
Para un éxito continuo, monitorea tus métricas de rendimiento de web push de iOS y considera implementar estrategias de mejora progresiva que manejen con gracia los pasos adicionales requeridos para usuarios de iOS mientras proporcionas experiencias fluidas en otras plataformas.