Aviso: No hay documentación heredada disponible para este elemento, por lo que está viendo la documentación actual.
Los usuarios de iOS solo pueden recibir notificaciones push web cuando un sitio web se ha añadido a su pantalla de inicio y se ha abierto como una aplicación web. Los visitantes que navegan por tu sitio directamente en Safari o en cualquier otro navegador en su iPhone o iPad no verán un aviso de suscripción a notificaciones push y no podrán suscribirse.
El widget Añadir a la pantalla de inicio soluciona esto. Cuando un visitante de iOS llega a tu sitio en un navegador, PushEngage detecta que el sitio no se está ejecutando en modo de pantalla de inicio y muestra una ventana emergente que le guía a través del proceso: toca el botón Compartir, selecciona Añadir a la pantalla de inicio, y luego abre el sitio desde el icono en su pantalla de inicio. Una vez que lo hacen, aparece el aviso estándar de suscripción a notificaciones push y pueden suscribirse como cualquier otro visitante.
Esta es una función que PushEngage añadió basándose en solicitudes directas de clientes, y habilitarla es el paso más importante que puedes dar para aumentar tu base de suscriptores de notificaciones push de iOS.
Requisitos
Antes de habilitar el widget, asegúrate de que tu configuración cumple con lo siguiente:
- iOS 16.4 o posterior. El widget solo se muestra en iOS 16.4 y versiones superiores. Los visitantes con versiones anteriores de iOS no lo verán, y las notificaciones push web no son compatibles con esas versiones de todos modos.
- Manifiesto de aplicación web. Para versiones de iOS anteriores a la 26, tu sitio debe incluir un manifiesto de aplicación web enlazado en el
<head>de la página (<link rel="manifest" href="/manifest.json">). Sin él, iOS no mostrará el icono y el nombre del sitio correctos cuando el visitante lo añada a su pantalla de inicio. En iOS 26 y versiones posteriores, se recomienda un manifiesto, pero no es obligatorio.
Si estás utilizando un plugin de WordPress o un creador de sitios web alojado, tu tema puede incluir ya un manifiesto. Puedes confirmarlo viendo el código fuente de tu página y buscando rel="manifest".
Encontrar el Widget
En tu panel de control de PushEngage, ve a Diseño » Widgets. Desplázate hasta la parte inferior de la página para encontrar la sección Añadir a la pantalla de inicio.
Haz clic en el interruptor para habilitar el widget. Una vez habilitado, aparecerá automáticamente a los visitantes de iOS que cumplan los requisitos y abran tu sitio en un navegador en lugar de desde un icono de la pantalla de inicio.
Para personalizar el texto y la apariencia, haz clic en Editar ventana emergente.
Editar el Widget
La página Editar Añadir a la pantalla de inicio está dividida en cuatro secciones: Detalles básicos, Personalización de la interfaz de usuario, Comportamiento de visualización y Segmentación de URL. Un panel de vista previa en vivo a la derecha se actualiza a medida que realizas cambios, para que puedas ver exactamente cómo se verá la ventana emergente antes de guardar.
Detalles básicos
Esta sección controla el contenido de texto de la ventana emergente.
Título
El titular del popup. El valor predeterminado es “Añadir a tu pantalla de inicio”. El límite de caracteres es 124. Mantenlo corto y directo: una instrucción clara funciona mejor que múltiples ideas.
El límite de caracteres es 305. El marcador de posición {{share_icon}} se representa como el icono del botón Compartir de iOS dentro del texto de la instrucción, lo que facilita a los visitantes identificar el botón correcto sin ninguna duda. Puedes colocar {{share_icon}} en cualquier lugar de tu texto de instrucción y PushEngage sustituirá la imagen del icono cuando se muestre el popup.
Texto del botón
La etiqueta del botón de confirmación. El valor predeterminado es “Ya lo he añadido”. El límite de caracteres es 47. Este es el botón que los visitantes pulsan después de completar los pasos: al pulsarlo, informan a PushEngage de que han añadido el sitio a su pantalla de inicio y se cierra el popup.
Personalización de la interfaz de usuario
Cinco ajustes de color controlan la apariencia del popup:
- Color de fondo: el fondo de la tarjeta del popup (predeterminado: blanco,
#ffffff) - Color del texto: el color del título y del texto de la instrucción (predeterminado: casi negro,
#0d0d0d) - Color del botón: el fondo del botón de confirmación (predeterminado: morado de PushEngage,
#4642E5) - Color del texto del botón: el color del texto en el botón de confirmación (predeterminado: blanco,
#ffffff) - Color del botón de cierre: el color del botón X en la esquina superior derecha de la tarjeta (predeterminado: casi negro,
#0d0d0d)
Haz clic en cualquier muestra de color para abrir el selector de color e introduce un valor hexadecimal o selecciona un color. La vista previa en directo se actualiza en tiempo real.
Comportamiento de visualización
Mostrar widget en controla la frecuencia con la que el popup aparece al mismo visitante. El valor predeterminado es “Una vez por sesión”, lo que significa que el popup se muestra una vez por sesión del navegador y puede volver a aparecer en la siguiente visita si el visitante aún no ha añadido el sitio a su pantalla de inicio.
Retraso de activación (segundos) establece cuántos segundos esperar después de cargar la página antes de mostrar el popup. El valor predeterminado es 0. Añadir un breve retraso de 3 a 5 segundos puede reducir la fricción para los visitantes que acaban de llegar a la página.
Segmentación por URL
Por defecto, el widget aparece en todas las páginas de tu sitio. Puedes usar la segmentación por URL para restringirlo a páginas específicas o suprimirlo en otras.
Incluir URLs: cuando está activado, el popup solo se muestra en las páginas cuya URL coincide con las reglas que definas. Esto es útil si deseas que la indicación aparezca solo en páginas de alta intención, como una página de producto, una página de destino o la página de inicio.
Excluir URLs: cuando está activado, el popup se suprime en las páginas cuya URL coincide con tus reglas. Utiliza esto para evitar que el popup aparezca en páginas donde podría ser disruptivo, como las páginas de pago o de gestión de cuentas.
Activa cualquiera de las opciones para mostrar el campo de entrada de URL, selecciona una regla de coincidencia (Contiene, Empieza por o Exacto), introduce parte de una URL y haz clic en Añadir URL.
Una vez configurados todos los ajustes, haz clic en Guardar cambios en la parte superior de la página.
Cómo funciona el widget para visitantes de iOS
Cuando un visitante de iOS que cumple los requisitos abre tu sitio en un navegador y el sitio aún no se está ejecutando en modo de pantalla de inicio, aparece la ventana emergente del widget después del retraso configurado. El visitante lee la instrucción, toca el botón Compartir en su navegador, selecciona Añadir a pantalla de inicio y añade el icono del sitio a su pantalla de inicio.
La próxima vez que el visitante abra tu sitio tocando el icono de la pantalla de inicio, el sitio se cargará como una aplicación web. PushEngage lo detecta y muestra el aviso estándar de suscripción a notificaciones push. El visitante puede entonces tocar Permitir y suscribirse.
Al tocar el botón de confirmación ("Ya lo he añadido") en el widget, se cierra la ventana emergente pero no se suscribe al visitante. La suscripción ocurre cuando abren el sitio desde su pantalla de inicio y responden al aviso de suscripción.
Preguntas frecuentes
¿El widget se mostrará a visitantes de Android o de escritorio? No. El widget Añadir a pantalla de inicio solo se muestra a usuarios de iOS en iOS 16.4 y versiones posteriores que visitan el sitio en un navegador en lugar de desde un icono de pantalla de inicio. Los visitantes de Android y de escritorio no se ven afectados.
¿Qué pasa si un visitante toca el botón de confirmación sin añadir realmente el sitio a su pantalla de inicio? El botón cierra la ventana emergente y PushEngage registra la interacción como completada. Dependiendo de tu configuración "Mostrar widget en", la ventana emergente puede volver a aparecer en una sesión futura si el visitante regresa a través de un navegador y aún no ha añadido el sitio a su pantalla de inicio.
¿El widget funciona en todos los navegadores en iPhone? Sí. En iOS, todos los navegadores, incluidos Safari, Chrome, Firefox y Edge, utilizan el mismo motor WebKit y comparten la misma limitación en cuanto a notificaciones push web. El widget aparece independientemente del navegador que esté utilizando el visitante, siempre que tenga iOS 16.4 o posterior y el sitio no esté abierto en modo de pantalla de inicio.
¿Por qué se requiere un manifiesto de aplicación web para iOS inferior a 26? Cuando un usuario añade un sitio a su pantalla de inicio, iOS lee el manifiesto de la aplicación web para determinar el nombre que se mostrará debajo del icono y qué imagen de icono utilizar. Sin un manifiesto, iOS recurre al título de la página y a una captura de pantalla, lo que puede parecer inconsistente o confuso. En iOS 26 y versiones posteriores, esta información también se puede inferir de otras señales de la página, por lo que se recomienda un manifiesto pero ya no es estrictamente necesario en esa versión.
Mi sitio ya tiene notificaciones push funcionando para otras plataformas. ¿Necesito hacer algo más para admitir iOS? Los únicos pasos adicionales para iOS son habilitar el widget Añadir a pantalla de inicio y asegurarse de que tu sitio incluya un manifiesto de aplicación web. PushEngage se encarga de la entrega de notificaciones una vez que los suscriptores aceptan. No se necesita ninguna configuración específica adicional para iOS más allá de lo cubierto en este artículo.
Si tienes preguntas sobre el widget Añadir a pantalla de inicio o necesitas ayuda con la configuración de notificaciones push web para iOS, no dudes en contactarnos. Nuestro equipo de soporte estará encantado de ayudarte.
