¿Buscas una forma sencilla de añadir notificaciones push PWA?
Las Progressive Web Apps (PWA) son aplicaciones que funcionan en cualquier dispositivo. Pero siempre hay algún conflicto al enviar notificaciones push web. Normalmente, el mayor problema son las tasas de entrega. Puedes añadir notificaciones push web a tu PWA de muchas maneras. Pero, ¿cómo enviar notificaciones push web que realmente se entreguen desde tu PWA?
¡No te preocupes! En este artículo, te mostraremos paso a paso cómo puedes enviar notificaciones push PWA con tasas de entrega fiables en menos de 10 minutos.
Vamos a ello.
Resumen rápido: ¿Qué son las notificaciones push PWA? Las notificaciones push de Progressive Web App (PWA) son mensajes push web estándar entregados a través de un service worker registrado de la PWA, lo que permite a las aplicaciones instaladas desde la web recibir mensajes push incluso cuando la página web está cerrada.
¡Envía Notificaciones Push PWA Hoy!
Las notificaciones push son una herramienta de marketing súper efectiva y de bajo costo para ayudarte a aumentar tu tráfico recurrente, participación y ventas de forma automática.
Cómo Instalar Notificaciones Push PWA
Añadir notificaciones push a una Progressive Web App es bastante sencillo. Solo tienes que seguir los pasos de este artículo. Si sigues cada paso, al final de este artículo deberías poder enviar notificaciones push como esta:
- Registra un service worker en la raíz del sitio que combine la lógica PWA y el manejo de notificaciones push.
- Instala el script de PushEngage y copia el código de instalación en el
<head>. - Configura la ventana emergente de opt-in y crea una campaña en el panel de control de PushEngage.
El principal desafío es que todo el software de notificaciones push web utiliza un archivo Javascript llamado service_worker.js. El service worker te ayuda a recopilar suscriptores de notificaciones push a través de ventanas emergentes. Pero todas las PWA ya tienen un archivo service worker que cumple un propósito diferente. Y a la vez, tu PWA solo puede usar un service worker.
En palabras sencillas, los servicios de notificaciones push web confunden a tu PWA. Por lo tanto, a veces recopilará suscriptores de notificaciones push y a veces no. A veces podrás enviar notificaciones y a veces no. Incluso podrías terminar enviando mensajes push a toda tu lista de suscriptores y que solo se entreguen a unos pocos.
Recomendamos usar PushEngage para enviar notificaciones push PWA. PushEngage es el software de notificaciones push número 1 del mundo. Así que sabes que tus campañas están en buenas manos.
Por supuesto, los creadores de PWA como Mendix vienen con su propio sistema de notificaciones push. Pero, ¿qué pasa si quieres migrar a otro servicio de notificaciones push? ¿Qué pasa si quieres más flexibilidad y control sobre tus campañas de notificaciones push? Es más, estos servicios suelen proporcionarte una API para crear campañas de notificaciones push. Pero con PushEngage, obtienes un panel fácil de usar desde el que puedes crear, programar, enviar y gestionar campañas de notificaciones push.
Y sí, puedes usar Firebase Cloud Messaging (FCM) para enviar notificaciones push de aplicaciones Android. Pero con PushEngage, puedes enviar notificaciones push de aplicaciones web y de Android, notificaciones push web y de aplicaciones iOS y iPadOS, y notificaciones push de navegador.
¿La mejor parte? Incluso puedes enviar potentes notificaciones push de eCommerce con unos pocos clics.
| Hecho | Valor |
|---|---|
| Mecanismo de entrega principal | Service worker (suscripción push) |
| Tiempo típico de configuración | ~10 minutos (básico) |
| Requisito común | service_worker.js con ámbito raíz + manifest.json |
| Funciona en | La mayoría de los navegadores de escritorio y Android (varía según la plataforma) |
Empecemos.
Paso n.º 1: Configura tu cuenta de PushEngage
Diríjase a la página principal de PushEngage y haga clic en el botón Empezar:
Puedes probar PushEngage gratis. Si tienes un blog pequeño que necesita tráfico y interacción repetidos, eso probablemente sea suficiente. Pero si te tomas en serio las ventas, deberías obtener el paquete Enterprise y desbloquear las campañas automatizadas.
Una vez que te hayas registrado en tu cuenta de PushEngage, dirígete a tu panel de control de PushEngage y ve a Configuración del sitio » Detalles del sitio:
Puedes configurar tu logo, nombre del sitio y URL del sitio aquí. Es muy importante organizar estas cosas ahora mismo para que puedas probar toda tu configuración más tarde.
Paso n.º 2: Obtén el código de instalación de PushEngage
Para instalar notificaciones push, necesitarás obtener un código de instalación. En tu pantalla de Configuración del sitio, desplázate hacia abajo y haz clic en el botón Haz clic aquí para obtener instrucciones de configuración:
Luego, haz clic en la pestaña Cualquier sitio:
Puedes usar el código Javascript para empezar a enviar notificaciones push.
Paso n.º 3: Añadir el Código del Service Worker para Notificaciones Push PWA
La parte más complicada del proceso está finalmente aquí. En el panel de PushEngage, en Instrucciones de configuración, también verás una opción para descargar el archivo del service worker.
IMPORTANTE: Una PWA solo puede tener un ámbito de service worker activo a la vez; fusiona el código push en tu service worker existente. Por defecto, una PWA no requiere un archivo de service worker. Todo lo que necesitas para convertir cualquier sitio en una Progressive Web App es un archivo manifest. Por lo tanto, si tu PWA no tiene un archivo de service worker, puedes simplemente agregar el service worker de PushEngage al directorio raíz de tu sitio web o aplicación web.
Pero si tu PWA ya tiene un service worker implementado, NO subas directamente el archivo del service worker de notificaciones push de PushEngage tal cual. Abre el service worker de PushEngage en un editor de texto como el Bloc de notas y copia el código del archivo del service worker de PushEngage. Luego, busca el archivo del service worker de tu PWA y simplemente agrega el código del service worker de PushEngage al archivo.
Si omites este paso, no podrás recopilar suscriptores de notificaciones push.
Paso #4: Configura la Suscripción de PushEngage
Ahora, vuelve a tu panel de control de PushEngage. Ve a Diseño » Modales emergentes y selecciona la opción de suscripción que prefieras:
La idea aquí es darle a tus visitantes una buena razón para suscribirse. Si necesitas ayuda con eso, consulta nuestro artículo sobre cómo crear una opción de suscripción a notificaciones push personalizadas.
Y si deseas algunas plantillas para empezar, deberías consultar este artículo sobre suscripciones a notificaciones push de alta conversión.
Paso #5: Crea tu primera campaña
Ahora que tu PWA puede enviar notificaciones push, deberías crear una campaña real.
Una campaña de carrito abandonado ayuda a generar ingresos adicionales al convertir carritos abandonados. Es un simple recordatorio que vende muchos productos en piloto automático. Por lo tanto, es una gran campaña para dar soporte a cualquier página de destino que genere ventas directas.
Simplemente ve a tu panel de PushEngage y dirígete a Campañas » Campañas activadas » Crear una nueva campaña activada:
Y luego, selecciona la plantilla de campaña Abandono de carrito:
Si eres nuevo en la creación de campañas de marketing automatizadas, puedes simplemente seguir nuestro artículo sobre cómo configurar una campaña de notificaciones push de carrito abandonado. Sigue cada paso y podrás configurar notificaciones push como esta:
Y por si te lo preguntas, no necesitas ser una marca de renombre para que tus campañas de notificaciones push sean efectivas. De hecho, PushEngage se creó para ayudar a las pequeñas empresas a crecer utilizando notificaciones push.
Pero antes de empezar a comercializar tu sitio, deberías solucionar cualquier problema con tu proceso de suscripción a notificaciones push. Consulta este artículo sobre cómo probar tus notificaciones push. Si todo funciona perfectamente, ¡has terminado!
Preguntas frecuentes
P: ¿Las notificaciones push de PWA requieren un service worker?
R: Sí. Los mensajes push de PWA son entregados por el service worker registrado, que debe incluir el manejo de eventos push.
P: ¿Puedo enviar notificaciones push de PWA en iOS?
R: El soporte de iOS para notificaciones push web basadas en service worker es limitado; los navegadores de Android y de escritorio admiten notificaciones push de PWA de forma generalizada. (Si tienes información precisa sobre el estado de iOS, reemplázala con una declaración corta y actual y cita la fuente).
P: ¿Cuál es el error de integración más común?
R: Subir un service worker push independiente a la raíz sin fusionarlo con el service worker existente de la PWA, lo que genera conflictos y suscripciones perdidas.
¿Qué Hacer Después de Añadir Notificaciones Push PWA?
¡Eso es todo por ahora, amigos!
Ahora puedes enviar notificaciones push de PWA. Para entonces, también habrás creado una potente campaña de notificaciones push web para impulsar tu crecimiento. ¡Todo eso, en menos de 10 minutos!
Consulta cómo crear también otras campañas automatizadas de notificaciones push. La mayoría de las campañas push son sencillas y efectivas. Por lo tanto, te recomendamos configurar varias campañas para tu sitio. Aquí tienes algunas excelentes para empezar:
- Cómo enviar automáticamente notificaciones push RSS
- Cómo configurar notificaciones push de abandono de carrito usando GTM
- Cómo programar notificaciones push de forma sencilla [Guía de 5 min.]
Y si aún no lo has hecho, empieza con PushEngage. PushEngage es el software de notificaciones push número 1 del mundo. Por lo tanto, tus campañas están en buenas manos.
