Tương tác Thời gian thực: Thông báo Web Push trong Rails 8

Các nhà phát triển độc lập thường gặp phải rào cản khi xây dựng các tính năng di động. Trước đây, bạn cần một ứng dụng native để gửi thông báo đẩy. Nếu không có, bạn phải dựa vào email hoặc SMS đắt đỏ.

Web Push API thay đổi điều này. Nó hoạt động trên hầu hết mọi trình duyệt, bao gồm cả Safari trên iOS. Bạn có thể gửi cảnh báo trực tiếp từ ứng dụng Rails của mình đến thiết bị của người dùng. Họ không cần phải tải xuống bất cứ thứ gì từ App Store.

Dưới đây là cách thiết lập trong Rails 8.

Quy trình làm việc

  • Subscription (Đăng ký): Người dùng nhấn "allow" trên trình duyệt. Trình duyệt sẽ cung cấp một đối tượng subscription.
  • Storage (Lưu trữ): Bạn lưu đối tượng này vào cơ sở dữ liệu và liên kết với người dùng.
  • The Push (Gửi Push): Máy chủ Rails của bạn gửi một thông điệp đã được ký (signed message) đến dịch vụ push của trình duyệt.
  • Delivery (Chuyển phát): Service worker trên thiết bị sẽ hiển thị thông báo.

Các bước thiết lập

  1. Security (Bảo mật) Bạn cần các khóa VAPID để định danh máy chủ của mình. Điều này ngăn chặn tin tặc gửi các cảnh báo giả mạo. Thêm gem web-push vào Gemfile. Chạy web-push generate-vapid-keys trong terminal của bạn. Lưu các khóa này vào tệp credentials.

  2. Database (Cơ sở dữ liệu) Người dùng thường có nhiều thiết bị. Hãy tạo một model để lưu trữ các subscription. Chạy: rails g model WebPushSubscription user:references endpoint:string p256dh_key:string auth_key:string Chạy: rails db:migrate

  3. Service Worker Tạo public/service-worker.js. Tệp này chạy ngay cả khi trang web của bạn đã đóng. Nó lắng nghe sự kiện push và hiển thị thông báo.

  4. Frontend Đăng ký worker trong application.js. Sử dụng một Stimulus controller để yêu cầu quyền. Gửi dữ liệu subscription đến Rails controller của bạn thông qua một yêu cầu POST.

  5. Background Jobs (Tác vụ chạy ngầm) Đừng bao giờ gửi thông báo trong chu kỳ yêu cầu chính (main request cycle). Hãy sử dụng một background job để tránh làm chậm ứng dụng của bạn. Tạo một SendWebPushJob. Lặp qua các subscription của người dùng. Sử dụng gem web-push để gửi payload. Xóa các subscription nếu chúng không còn hiệu lực.

Bạn có thể xây dựng một ứng dụng mang lại trải nghiệm như ứng dụng di động native chỉ với Rails và một lượng nhỏ Javascript.

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