Real-time interactie: Web Push-notificaties in Rails 8

Solo-ontwikkelaars lopen vaak tegen een muur aan bij het bouwen van mobiele functies. Voorheen had je een native app nodig om push-notificaties te versturen. Als je die niet had, was je aangewezen op e-mail of dure SMS-berichten.

De Web Push API verandert dit. Het werkt op bijna elke browser, inclusief Safari op iOS. Je kunt waarschuwingen rechtstreeks vanuit je Rails-app naar het apparaat van een gebruiker sturen. Ze hoeven niets te downloaden uit een App Store.

Hier lees je hoe je dit instelt in Rails 8.

De workflow

  • Subscription: De gebruiker klikt op 'toestaan' in de browser. De browser levert een subscription-object.
  • Opslag: Je slaat dit object op in je database, gekoppeld aan de gebruiker.
  • De Push: Je Rails-server stuurt een ondertekend bericht naar de browser push-service.
  • Levering: De service worker op het apparaat toont de notificatie.

Installatiestappen

1. Beveiliging

Je hebt VAPID-sleutels nodig om je server te identificeren. Dit voorkomt dat hackers valse meldingen versturen. Voeg de web-push gem toe aan je Gemfile. Voer web-push generate-vapid-keys uit in je terminal. Sla deze sleutels op in je credentials-bestand.

2. Database

Gebruikers hebben vaak meerdere apparaten. Maak een model aan om subscriptions op te slaan. Voer uit: rails g model WebPushSubscription user:references endpoint:string p256dh_key:string auth_key:string Voer uit: rails db:migrate

3. Service Worker

Maak public/service-worker.js aan. Dit bestand blijft draaien, zelfs als je website gesloten is. Het luistert naar het push-event en toont de notificatie.

4. Frontend

Registreer de worker in je application.js. Gebruik een Stimulus-controller om toestemming te vragen. Stuur de subscription-gegevens naar je Rails-controller via een POST-verzoek.

5. Background Jobs

Verstuur nooit notificaties binnen de hoofd-requestcyclus. Gebruik een background job om te voorkomen dat je app traag wordt. Maak een SendWebPushJob aan. Loop door de subscriptions van een gebruiker. Gebruik de web-push gem om de payload te versturen. Verwijder subscriptions als ze niet langer geldig zijn.

Je kunt een app bouwen die aanvoelt als een native mobiele ervaring, met alleen Rails en een klein beetje Javascript.

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