Взаємодія в реальному часі: Web Push-сповіщення в Rails 8

Розробники-одинаки часто стикаються з труднощами під час створення мобільних функцій. Раніше для надсилання push-сповіщень був потрібен нативний додаток. Якщо його не було, доводилося покладатися на електронну пошту або дорогі SMS.

Web Push API змінює це. Він працює майже в кожному браузері, включаючи Safari на iOS. Ви можете надсилати сповіщення безпосередньо з вашого Rails-додатка на пристрій користувача. Їм не потрібно нічого завантажувати з App Store.

Ось як це налаштувати в Rails 8.

Процес роботи

  • Підписка: Користувач натискає «дозволити» у своєму браузері. Браузер надає об'єкт підписки (subscription object).
  • Зберігання: Ви зберігаєте цей об'єкт у своїй базі даних, прив'язуючи його до користувача.
  • Push-сповіщення: Ваш Rails-сервер надсилає підписане повідомлення сервісу push-сповіщень браузера.
  • Доставка: Service worker на пристрої відображає сповіщення.

Кроки налаштування

1. Безпека

Вам потрібні ключі VAPID, щоб ідентифікувати свій сервер. Це запобігає надсиланню фейкових сповіщень хакерами.

  1. Додайте gem web-push до вашого Gemfile.
  2. Виконайте web-push generate-vapid-keys у вашому терміналі.
  3. Збережіть ці ключі у вашому файлі credentials.

2. База даних

Користувачі часто мають кілька пристроїв. Створіть модель для зберігання підписок.

  1. Виконайте: rails g model WebPushSubscription user:references endpoint:string p256dh_key:string auth_key:string
  2. Виконайте: rails db:migrate

3. Service Worker

Створіть public/service-worker.js. Цей файл працює навіть тоді, коли ваш вебсайт закрито. Він прослуховує подію push і відображає сповіщення.

4. Frontend

  1. Зареєструйте worker у вашому application.js.
  2. Використовуйте Stimulus-контролер, щоб запитати дозвіл. Надсилайте дані підписки до вашого Rails-контролера через POST-запит.

5. Фонові завдання (Background Jobs)

Ніколи не надсилайте сповіщення в основному циклі запиту. Використовуйте фонове завдання, щоб уникнути уповільнення вашого додатка.

  1. Створіть SendWebPushJob.
  2. Пройдіть циклом по підписках користувача.
  3. Використовуйте gem web-push для надсилання payload.
  4. Видаляйте підписки, якщо вони більше не є дійсними.

Ви можете створити додаток, який відчувається як нативний мобільний досвід, використовуючи лише Rails та невелику кількість JavaScript.

Джерело: https://dev.to/zilton7/real-time-engagement-web-push-notifications-in-rails-8-5gdp