Echtzeit-Interaktion: Web Push Benachrichtigungen in Rails 8

Solo-Entwickler stoßen beim Bau von mobilen Funktionen oft an Grenzen. Früher benötigte man eine native App, um Push-Benachrichtigungen zu senden. Wenn man keine hatte, war man auf E-Mails oder teure SMS angewiesen.

Die Web Push API ändert das. Sie funktioniert in fast jedem Browser, einschließlich Safari auf iOS. Sie können Benachrichtigungen direkt von Ihrer Rails-App an das Gerät eines Nutzers senden. Die Nutzer müssen nichts aus einem App Store herunterladen.

So richten Sie es in Rails 8 ein.

Der Workflow

  • Abonnement: Der Nutzer klickt im Browser auf „Zulassen“. Der Browser stellt ein Subscription-Objekt bereit.
  • Speicherung: Sie speichern dieses Objekt in Ihrer Datenbank, verknüpft mit dem Nutzer.
  • Der Push: Ihr Rails-Server sendet eine signierte Nachricht an den Browser-Push-Dienst.
  • Zustellung: Der Service Worker auf dem Gerät zeigt die Benachrichtigung an.

Einrichtungsschritte

  1. Sicherheit Sie benötigen VAPID-Keys, um Ihren Server zu identifizieren. Dies verhindert, dass Hacker gefälschte Benachrichtigungen senden. Fügen Sie das web-push Gem zu Ihrem Gemfile hinzu. Führen Sie web-push generate-vapid-keys in Ihrem Terminal aus. Speichern Sie diese Keys in Ihrer Credentials-Datei.

  2. Datenbank Nutzer haben oft mehrere Geräte. Erstellen Sie ein Model, um Abonnements zu speichern. Führen Sie aus: rails g model WebPushSubscription user:references endpoint:string p256dh_key:string auth_key:string Führen Sie aus: rails db:migrate

  3. Service Worker Erstellen Sie public/service-worker.js. Diese Datei läuft selbst dann, wenn Ihre Website geschlossen ist. Sie lauscht auf das Push-Event und zeigt die Benachrichtigung an.

  4. Frontend Registrieren Sie den Worker in Ihrer application.js. Verwenden Sie einen Stimulus-Controller, um die Erlaubnis abzufragen. Senden Sie die Subscription-Daten per POST-Request an Ihren Rails-Controller.

  5. Hintergrund-Jobs Senden Sie Benachrichtigungen niemals im Haupt-Request-Zyklus. Verwenden Sie einen Hintergrund-Job, um zu verhindern, dass Ihre App verlangsamt wird. Erstellen Sie einen SendWebPushJob. Iterieren Sie durch die Abonnements eines Nutzers. Verwenden Sie das web-push Gem, um den Payload zu senden. Löschen Sie Abonnements, wenn diese nicht mehr gültig sind.

Sie können eine App bauen, die sich wie eine native mobile Erfahrung anfühlt, indem Sie nur Rails und kleine Mengen JavaScript verwenden.

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