Aviso: No hay documentación heredada disponible para este elemento, por lo que está viendo la documentación actual.
Apple ha lanzado iOS y iPadOS 16.4, que admiten notificaciones push web para aplicaciones web añadidas a la pantalla de inicio en dispositivos iPhone y iPad. En esta guía, te ayudamos a configurar tu sitio web para enviar notificaciones a usuarios de iPhone y iPad que visitan tu sitio web.
Desbloquea un Alcance Ilimitado en Dispositivos iOS. No Pierdas el Impulso.
Ponte en marcha hoy mismo y recupera a los visitantes de tu sitio antes de que te olviden. Empieza gratis, envía de forma más inteligente y crece con un plan que se adapte a tu sitio.
Las notificaciones push web están disponibles para el navegador Safari, Google Chrome y Edge en iPhone y iPad con iOS y iPadOS 16.4. iOS requiere que el usuario añada tu sitio web a su pantalla de inicio y luego abra la aplicación web tocando su icono. La aplicación web se abre como cualquier otra aplicación nativa en iOS o iPadOS en lugar de abrirse en un navegador. Los usuarios pueden conceder permiso para recibir notificaciones push y luego gestionar esos permisos en la Configuración de Notificaciones, al igual que cualquier otra aplicación en iPhone y iPad.
Antes de empezar
Necesitas algunas cosas para que las campañas de push web funcionen en dispositivos iOS.
- Tu aplicación web debe servir un archivo de manifiesto de aplicación web (manifest.json) con su miembro `display` establecido en `standalone` o `fullscreen`.
- Los usuarios deben tener iOS o iPadOS 16.4 o posterior.
- El usuario necesita instalar la aplicación web en su pantalla de inicio tocando el botón Compartir para abrir el menú Compartir, y luego tocando "Añadir a pantalla de inicio".
- Se requiere una interacción del usuario, como un clic o toque en un botón, para mostrar el aviso de permiso nativo y permitir el permiso para recibir notificaciones push.
Si tu sitio web ya es una Aplicación Web Progresiva (PWA), no necesitas hacer actualizaciones adicionales para prepararte para las notificaciones push web de iOS/iPadOS. Si no estás seguro de si tu sitio web es una PWA, consulta con tu equipo de desarrollo o utiliza Lighthouse en Chrome DevTools.
Configuración de tu sitio web para notificaciones push web de iOS y iPadOS
Sigue los pasos para habilitar y enviar notificaciones push a Safari en iPhone y iPad:
- 1. Añade un archivo de manifiesto de aplicación web a tu sitio web.
- 2. Integra PushEngage en tu sitio web.
- 3. Implementa y prueba el manifiesto de tu sitio web.
- 4. Prueba el modal del cuadro de diálogo de suscripción y el aviso de permiso.
1. Añade un archivo de manifiesto de aplicación web a tu sitio web
El manifiesto de aplicación web es un archivo JSON que informa al navegador sobre tu Aplicación Web Progresiva (PWA) y cómo debe verse y comportarse cuando se instala en el escritorio o dispositivo móvil del usuario. Contiene metadatos como el nombre de tu aplicación web, descripción, iconos, esquema de color y la URL que debe abrirse cuando se inicia la aplicación.
Puedes usar cualquier herramienta en línea para generar rápidamente un archivo de manifiesto. El archivo de manifiesto puede tener cualquier nombre, pero comúnmente se llama `manifest.json` y debe subirse al directorio raíz de tu sitio web. Si necesitas ayuda para añadir código a tu sitio de WordPress, prueba el plugin WPCode.
Un manifiesto típico se parece a esto:
{
"name": "PushEngage",
"short_name": "PushEngage",
"start_url": "/",
"display": "standalone",
"theme_color": "#3b43ff",
"background_color": "#ffffff",
"icons": [
{
"src": "icon/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "img/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "img/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Nota: El valor del miembro `display` en el manifiesto debe establecerse en `standalone` o `fullscreen`.
Después de crear el archivo de manifiesto, haz referencia al manifiesto en la pésgina HTML de tu sitio web utilizando una etiqueta <link> en la secciésn <head> de la pésgina.
Por ejemplo:
<link rel="manifest" href="/manifest.json">
2. Integra PushEngage en tu sitio web
El siguiente paso es integrar PushEngage en tu sitio web para gestionar el registro e instalaciésn del Service Worker en la pésgina.
Si no has completado la instalaciésn, aqués tienes la guésa para instalar PushEngage. Si eres usuario de WordPress, puedes usar el Plugin de WordPress PushEngage, que se encargarés de registrar el service worker.
Puedes seguir los pasos mencionados aqués si ya tienes tu service worker y necesitas fusionarlo con el service worker de PushEngage.
3. Despliega y prueba el manifiesto de tu sitio web
Una vez que hayas subido el manifiesto y integrado PushEngage, el siguiente paso es probar tu aplicaciésn web para asegurarte de que el manifiesto de tu aplicaciésn web se implementés correctamente. Puedes probar tu sitio web en varios dispositivos y navegadores aésadiésndolo a tu pantalla de inicio.
Sigue estos pasos:
- 1. Abre el sitio web en el navegador Safari en iOS 16.4 o posterior
- 2. Haz clic en el botésn "Compartir" para abrir el menés de compartir.
- 3. Haz clic en la opciésn "Aésadir a pantalla de inicio".
- 4. Guarda la aplicaciésn en tu pantalla de inicio.
Si tu sitio web se ha configurado correctamente para web push, abrirés la aplicaciésn web como cualquier otra aplicaciésn en iOS o iPadOS en lugar de abrirse en un navegador y actuar meramente como un acceso directo.
Debes informar a tu usuario mostrando un banner en la pantalla de la aplicaciésn, pidiésndole que aésada tu aplicaciésn a la pantalla de inicio de su dispositivo iOS y se suscriba a las notificaciones push web.
4. Prueba el cuadro de diéslogo de suscripciésn
Una aplicaciésn web en pantalla de inicio en iOS y iPadOS requiere interacciésn directa del usuario, como tocar un botésn en la pésgina para mostrar el cuadro de diéslogo de suscripciésn para obtener permiso. Sigue estos pasos para comprobar que la solicitud de permiso funciona:
- 1. Abre la aplicaciésn web tocando el icono de la aplicaciésn desde la pantalla de inicio en tu dispositivo.
- 2. Espera a que aparezca el cuadro de diéslogo de suscripciésn de PushEngage en la pésgina.
- 3. Haz clic en el botésn "Permitir" en la ventana modal de PushEngage para mostrar la solicitud de permiso.
- 4. Haz clic en el botésn "Permitir" en la solicitud de permiso.
Nota: El cuadro de diéslogo de suscripciésn solo aparecerés si tu sitio web es HTTPS y la aplicaciésn se ha iniciado desde la pantalla de inicio. Puedes personalizar el diseéso y el comportamiento del cuadro de diéslogo de suscripciésn desde el panel de control de PushEngage.
Envésa una campaésa de Web Push a usuarios de iOS y iPadOS
Una vez que hayas completado los pasos anteriores necesarios para las notificaciones push web de iOS y iPadOS, ahora puedes empezar a enviar una notificaciésn push usando el panel de control de PushEngage.
Las notificaciones push web en iOS funcionan de manera similar a otras aplicaciones nativas. Las notificaciones push web se muestran en la pantalla como una notificación de aviso, en el centro de notificaciones y también en la pantalla de bloqueo. Los usuarios también pueden administrar sus preferencias de notificación desde la Configuración de iOS. Una vez que haga clic en la notificación, lo llevará a la página de destino deseada dentro de la aplicación web.
La estructura de una notificación push web en iOS
Las notificaciones push de Safari en iOS no admiten actualmente contenido multimedia enriquecido, GIFs animados ni vídeos. Una vez que se agreguen estas funciones, las habilitaremos también. Siga las siguientes pautas para crear sus notificaciones para usuarios de iOS.
Las notificaciones push web en iOS y iPadOS incluyen los siguientes elementos:
- 1. Icono – El icono especificado en el archivo de manifiesto. No se puede cambiar para mensajes individuales.
- 2. Título – El título está restringido a 30-40 caracteres, después de lo cual se trunca.
- 3. Nombre de la aplicación – El nombre de la aplicación se proporciona en el archivo de manifiesto y no se puede cambiar para mensajes individuales.
- 4. Mensaje – El texto está restringido a 120-150 caracteres, después de lo cual se trunca.
- 5. Marca de tiempo – Esto muestra cuánto tiempo hace que se entregó la notificación al dispositivo.
Esto es todo lo que necesita para empezar a recopilar suscriptores y enviar campañas a sus usuarios de iPhone y iPad.
Si tiene algún problema, contáctenos haciendo clic aquí. Nuestro equipo de soporte podrá ayudarle.
