Interacción en tiempo real: Notificaciones Web Push en Rails 8

Los desarrolladores independientes suelen encontrarse con un muro al crear funciones móviles. Antes se necesitaba una aplicación nativa para enviar notificaciones push. Si no tenías una, dependías del correo electrónico o de costosos SMS.

La Web Push API cambia esto. Funciona en casi todos los navegadores, incluido Safari en iOS. Puedes enviar alertas directamente desde tu aplicación Rails al dispositivo de un usuario. No necesitan descargar nada de una App Store.

Aquí te explicamos cómo configurarlo en Rails 8.

El flujo de trabajo

  • Suscripción: El usuario hace clic en "permitir" en su navegador. El navegador proporciona un objeto de suscripción.
  • Almacenamiento: Guardas este objeto en tu base de datos vinculado al usuario.
  • El Push: Tu servidor Rails envía un mensaje firmado al servicio de push del navegador.
  • Entrega: El service worker en el dispositivo muestra la notificación.

Pasos de configuración

  1. Seguridad Necesitas claves VAPID para identificar tu servidor. Esto evita que los hackers envíen alertas falsas. Añade la gema web-push a tu Gemfile. Ejecuta web-push generate-vapid-keys en tu terminal. Guarda estas claves en tu archivo de credenciales.

  2. Base de datos Los usuarios suelen tener múltiples dispositivos. Crea un modelo para almacenar las suscripciones. Ejecuta: rails g model WebPushSubscription user:references endpoint:string p256dh_key:string auth_key:string Ejecuta: rails db:migrate

  3. Service Worker Crea public/service-worker.js. Este archivo se ejecuta incluso cuando tu sitio web está cerrado. Escucha el evento de push y muestra la notificación.

  4. Frontend Registra el worker en tu application.js. Usa un controlador de Stimulus para solicitar permiso. Envía los datos de la suscripción a tu controlador de Rails mediante una solicitud POST.

  5. Background Jobs Nunca envíes notificaciones en el ciclo de solicitud principal. Usa un trabajo en segundo plano para evitar ralentizar tu aplicación. Crea un SendWebPushJob. Recorre las suscripciones de un usuario. Usa la gema web-push para enviar el payload. Elimina las suscripciones si ya no son válidas.

Puedes construir una aplicación que se sienta como una experiencia móvil nativa usando solo Rails y pequeñas cantidades de JavaScript.

Fuente: https://dev.to/zilton7/real-time-engagement-web-push-notifications-in-rails-8-5gdp