Nhiệm vụ: Cấu hình Web Push thông báo cho các yêu cầu trợ giúp

Cấu hình Web Push thông báo cho các yêu cầu trợ giúp

Thêm Web Push tiêu chuẩn với VAPID để người dùng có trạng thái "Tôi đang trực tuyến" nhận được thông báo về các yêu cầu mới ngay cả khi tab đã bị đóng.

Mục tiêu

Đảm bảo gửi thông báo về các yêu cầu trợ giúp mới tới những người dùng đã bật trạng thái "Tôi đang trực tuyến", ngay cả khi tab trang web không hoạt động hoặc bị trình duyệt giải phóng bộ nhớ.

Sử dụng tiêu chuẩn Web Push API + Service Worker + VAPID, không gắn logic nghiệp vụ với Firebase hoặc tích hợp APNs riêng biệt.

Kiến trúc

Client:

  • yêu cầu quyền nhận thông báo;
  • đăng ký Service Worker;
  • PushManager.subscribe() với khóa VAPID công khai;
  • gửi PushSubscription lên backend;
  • xử lý sự kiện push trong Service Worker;
  • hiển thị thông báo hệ thống;
  • xử lý nhấp vào thông báo và mở màn hình/yêu cầu tương ứng.

Backend:

  • tạo và lưu trữ cặp khóa VAPID;
  • lưu trữ các đăng ký push của người dùng;
  • gửi Web Push đến endpoint ẩn (opaque endpoint) do trình duyệt cung cấp;
  • mã hóa payload bằng các khóa đăng ký;
  • ký VAPID cho các yêu cầu;
  • xóa các đăng ký đã hết hạn khi nhận được phản hồi 404/410;
  • ghi log việc gửi và lỗi.

Tích hợp trạng thái (Presence)

Push chỉ nên được gửi tới những người dùng đang bật trạng thái "Tôi đang trực tuyến".

Trạng thái phải có TTL để người dùng không nhận được thông báo sau một thời gian dài kể từ khi họ thực sự không còn sẵn sàng.

Realtime cho tab đang hoạt động và Web Push cho tab nền/đã đóng phải sử dụng cùng một sự kiện help_requested, nhưng các kênh phân phối khác nhau.

Kịch bản

  1. Người dùng bật "Tôi đang trực tuyến".
  2. Nếu quyền push chưa được cấp — hiển thị lời nhắc bật thông báo.
  3. Trình duyệt tạo đăng ký và truyền nó tới backend.
  4. Một yêu cầu trợ giúp mới xuất hiện.
  5. Tab đang hoạt động nhận sự kiện qua kênh realtime.
  6. Tab không hoạt động/đã đóng nhận sự kiện qua Web Push.
  7. Nhấp vào thông báo sẽ mở yêu cầu trợ giúp cụ thể.

Đặc điểm trên iOS

Kiểm tra và tính đến các giới hạn hiện tại của Web Push trên iPhone/iPad:

  • Web Push hoạt động đối với web app được thêm vào Màn hình chính (Home Screen);
  • quyền phải được yêu cầu sau hành động rõ ràng của người dùng;
  • việc phân phối đi qua hạ tầng của Apple, nhưng tài khoản Apple Developer riêng và tích hợp APNs thủ công là không bắt buộc đối với Web Push tiêu chuẩn.

Những điểm cần kiểm tra

  • Chrome desktop;
  • Firefox desktop;
  • Safari macOS;
  • Android Chrome;
  • Web app trên Màn hình chính iPhone/iPad;
  • đăng ký lại sau khi đặt lại quyền;
  • cập nhật Service Worker;
  • nhiều thiết bị của cùng một người dùng;
  • xóa các đăng ký không hợp lệ;
  • chuyển hướng từ thông báo sang tab đã mở và tab mới.

Nguyên tắc

Toàn bộ logic thông báo, đăng ký, hàng đợi và định tuyến được giữ nguyên trên hạ tầng của bạn. Các nhà cung cấp push bên ngoài của trình duyệt chỉ được sử dụng làm kênh truyền tải cho Web Push tiêu chuẩn.