Keterlibatan Real-Time: Notifikasi Web Push di Rails 8

Pengembang solo sering kali menemui hambatan saat membangun fitur seluler. Dulu, Anda membutuhkan aplikasi native untuk mengirim notifikasi push. Jika tidak memilikinya, Anda hanya bisa mengandalkan email atau SMS yang mahal.

Web Push API mengubah hal ini. API ini bekerja di hampir semua browser, termasuk Safari di iOS. Anda dapat mengirim peringatan langsung dari aplikasi Rails Anda ke perangkat pengguna. Mereka tidak perlu mengunduh apa pun dari App Store.

Berikut adalah cara mengaturnya di Rails 8.

Alur Kerja

  • Langganan (Subscription): Pengguna mengklik "allow" di browser mereka. Browser akan menyediakan objek langganan.
  • Penyimpanan: Anda menyimpan objek ini di database yang terhubung dengan pengguna.
  • Push: Server Rails Anda mengirimkan pesan bertanda tangan ke layanan push browser.
  • Pengiriman: Service worker di perangkat akan menampilkan notifikasi.

Langkah-langkah Pengaturan

  1. Keamanan Anda memerlukan kunci VAPID untuk mengidentifikasi server Anda. Ini mencegah peretas mengirimkan peringatan palsu. Tambahkan gem web-push ke Gemfile Anda. Jalankan web-push generate-vapid-keys di terminal Anda. Simpan kunci-kunci ini di file credentials Anda.

  2. Database Pengguna sering kali memiliki beberapa perangkat. Buatlah sebuah model untuk menyimpan langganan. Jalankan: rails g model WebPushSubscription user:references endpoint:string p256dh_key:string auth_key:string Jalankan: rails db:migrate

  3. Service Worker Buat public/service-worker.js. File ini tetap berjalan meskipun situs web Anda ditutup. File ini mendengarkan event push dan menampilkan notifikasi.

  4. Frontend Daftarkan worker tersebut di application.js Anda. Gunakan controller Stimulus untuk meminta izin. Kirim data langganan ke controller Rails Anda melalui permintaan POST.

  5. Background Jobs Jangan pernah mengirim notifikasi dalam siklus permintaan utama. Gunakan background job untuk menghindari perlambatan aplikasi Anda. Buat SendWebPushJob. Lakukan iterasi pada langganan pengguna. Gunakan gem web-push untuk mengirim payload. Hapus langganan jika sudah tidak valid lagi.

Anda dapat membangun aplikasi yang terasa seperti pengalaman seluler native hanya dengan menggunakan Rails dan sedikit Javascript.

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