Engagement en temps réel : les notifications Web Push dans Rails 8

Les développeurs solo se heurtent souvent à un mur lors de la création de fonctionnalités mobiles. Il fallait auparavant une application native pour envoyer des notifications push. Si vous n'en aviez pas, vous deviez vous appuyer sur l'e-mail ou sur des SMS coûteux.

L'API Web Push change la donne. Elle fonctionne sur presque tous les navigateurs, y compris Safari sur iOS. Vous pouvez envoyer des alertes directement depuis votre application Rails vers l'appareil d'un utilisateur. Ils n'ont rien besoin de télécharger depuis un App Store.

Voici comment l'installer dans Rails 8.

Le workflow

  • Abonnement : l'utilisateur clique sur « autoriser » dans son navigateur. Le navigateur fournit un objet d'abonnement.
  • Stockage : vous enregistrez cet objet dans votre base de données, lié à l'utilisateur.
  • Le Push : votre serveur Rails envoie un message signé au service de push du navigateur.
  • Livraison : le service worker sur l'appareil affiche la notification.

Étapes de configuration

  1. Sécurité Vous avez besoin de clés VAPID pour identifier votre serveur. Cela empêche les pirates d'envoyer de fausses alertes. Ajoutez la gem web-push à votre Gemfile. Exécutez web-push generate-vapid-keys dans votre terminal. Enregistrez ces clés dans votre fichier de credentials.

  2. Base de données Les utilisateurs ont souvent plusieurs appareils. Créez un modèle pour stocker les abonnements. Exécutez : rails g model WebPushSubscription user:references endpoint:string p256dh_key:string auth_key:string Exécutez : rails db:migrate

  3. Service Worker Créez public/service-worker.js. Ce fichier s'exécute même lorsque votre site web est fermé. Il écoute l'événement de push et affiche la notification.

  4. Frontend Enregistrez le worker dans votre application.js. Utilisez un contrôleur Stimulus pour demander la permission. Envoyez les données d'abonnement à votre contrôleur Rails via une requête POST.

  5. Jobs en arrière-plan N'envoyez jamais de notifications dans le cycle de requête principal. Utilisez un job en arrière-plan pour éviter de ralentir votre application. Créez un SendWebPushJob. Parcourez les abonnements d'un utilisateur. Utilisez la gem web-push pour envoyer le payload. Supprimez les abonnements s'ils ne sont plus valides.

Vous pouvez créer une application qui offre une expérience mobile native en utilisant uniquement Rails et de petites quantités de JavaScript.

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