Cách hoạt động của tính năng đẩy

Trước khi đi sâu vào API, hãy xem xét thông báo đẩy từ tổng quan đến chi tiết. Sau đó, khi chúng ta xem xét từng chủ đề hoặc API riêng lẻ, bạn sẽ biết được cách thức và lý do tại sao điều này lại quan trọng.

Sau đây là 3 bước chính để triển khai thông báo đẩy:

1. Thêm logic phía máy khách để đăng ký cho người dùng nhận thông báo đẩy (tức là JavaScript và giao diện người dùng trong ứng dụng web của bạn sẽ đăng ký cho người dùng nhận thông báo đẩy).
2. Lệnh gọi API từ phụ trợ / ứng dụng của bạn sẽ kích hoạt một thông báo đẩy đến thiết bị của người dùng.
3. Tệp JavaScript của worker dịch vụ sẽ nhận được "sự kiện đẩy" khi thông báo đẩy đến thiết bị. Bạn sẽ có thể hiển thị thông báo trong JavaScript này.

Hãy cùng tìm hiểu chi tiết hơn về từng bước này.

Bước 1: Phía máy khách

Bước đầu tiên là "đăng ký" người dùng nhận thông báo đẩy.

Bạn cần có 2 điều kiện để đăng ký người dùng. Trước tiên, bạn cần có sự cho phép của người dùng để gửi cho họ thông báo đẩy. Thứ hai, nhận PushSubscription từ trình duyệt.

PushSubscription chứa tất cả thông tin chúng tôi cần để gửi thông báo đẩy cho người dùng đó. Bạn có thể coi đây là một mã nhận dạng cho thiết bị của người dùng đó.

Tất cả đều được thực hiện bằng JavaScript thông qua Push API.

Trước khi đăng ký cho người dùng, bạn cần tạo một bộ "khoá máy chủ ứng dụng" mà chúng ta sẽ đề cập sau.

Khoá máy chủ ứng dụng (còn gọi là khoá VAPID) là khoá duy nhất cho máy chủ của bạn. Các khoá này cho phép dịch vụ đẩy biết máy chủ ứng dụng nào đã đăng ký người dùng và đảm bảo rằng đó là cùng một máy chủ kích hoạt thông báo đẩy cho người dùng đó.

Sau khi đăng ký cho người dùng và có PushSubscription, bạn cần gửi thông tin chi tiết về PushSubscription đến phụ trợ / máy chủ của mình. Trên máy chủ, bạn sẽ lưu thuê bao này vào cơ sở dữ liệu và dùng nó để gửi thông báo đẩy cho người dùng đó.

Bước 2: Gửi thông báo đẩy

Khi muốn gửi thông báo đẩy cho người dùng, bạn cần thực hiện một lệnh gọi API đến dịch vụ đẩy. Lệnh gọi API này sẽ bao gồm những dữ liệu cần gửi, người nhận tin nhắn và mọi tiêu chí về cách gửi tin nhắn. Thông thường, lệnh gọi API này được thực hiện từ máy chủ của bạn.

Một số câu hỏi mà bạn có thể tự hỏi bản thân:

• Dịch vụ truyền tin là gì và dành cho ai?
• API trông như thế nào? Đó là JSON, XML hay định dạng nào khác?
• API này có thể làm gì?

Dịch vụ truyền tin là gì và dành cho ai?

Dịch vụ truyền dữ liệu nhận một yêu cầu mạng, xác thực yêu cầu đó và gửi một thông báo đẩy đến trình duyệt thích hợp. Nếu trình duyệt không kết nối mạng, thông báo sẽ được xếp hàng cho đến khi trình duyệt kết nối mạng.

Mỗi trình duyệt có thể sử dụng bất kỳ dịch vụ truyền tin nào mà họ muốn, đây là điều mà nhà phát triển không kiểm soát được. Đây không phải là vấn đề vì mọi dịch vụ truyền dữ liệu đều mong đợi lệnh gọi API giống nhau. Điều này có nghĩa là bạn không cần quan tâm đến việc dịch vụ đẩy là ai. Bạn chỉ cần đảm bảo rằng lệnh gọi API của bạn hợp lệ.

Để nhận được URL thích hợp nhằm kích hoạt thông báo đẩy (tức là URL cho dịch vụ đẩy), bạn chỉ cần xem giá trị endpoint trong PushSubscription.

Dưới đây là ví dụ về các giá trị bạn sẽ nhận được từ PushSubscription:

{
  "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/",
  "keys": {
    "p256dh": "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
    "auth": "tBHItJI5svbpez7KI4CCXg=="
  }
}

Điểm cuối trong trường hợp này là https://random-push-service.com/some-kind-of-unique-id-1234/v2/. Dịch vụ truyền tin sẽ là "random-push-service.com" và mỗi điểm cuối là duy nhất đối với một người dùng, được biểu thị bằng "some-kind-of-unique-id-1234". Khi bắt đầu làm việc với thông báo đẩy, bạn sẽ nhận thấy mô hình này.

Chúng ta sẽ đề cập đến các khoá trong gói thuê bao ở phần sau.

API trông như thế nào?

Tôi đã đề cập đến việc mọi dịch vụ thông báo đẩy trên web đều mong đợi cùng một lệnh gọi API. API đó là Giao thức thông báo đẩy trên web. Đây là một tiêu chuẩn của IETF xác định cách bạn thực hiện lệnh gọi API đến một dịch vụ truyền tin.

Lệnh gọi API yêu cầu bạn đặt một số tiêu đề nhất định và dữ liệu phải là một luồng byte. Chúng ta sẽ xem xét các thư viện có thể thực hiện lệnh gọi API này cho chúng ta cũng như cách tự thực hiện.

API này có thể làm gì?

API này cung cấp một cách để gửi tin nhắn cho người dùng, có / không có dữ liệu và cung cấp hướng dẫn về cách gửi tin nhắn.

Dữ liệu bạn gửi bằng thông báo đẩy phải được mã hoá. Lý do là vì điều này ngăn các dịch vụ truyền dữ liệu (có thể là bất kỳ ai) xem được dữ liệu được gửi cùng với thông báo đẩy. Điều này rất quan trọng vì trình duyệt là bên quyết định sử dụng dịch vụ truyền tin đẩy nào. Điều này có thể tạo cơ hội cho các trình duyệt sử dụng dịch vụ truyền tin đẩy không an toàn hoặc không bảo mật.

Khi bạn kích hoạt một thông báo đẩy, dịch vụ đẩy sẽ nhận được lệnh gọi API và xếp hàng thông báo. Thông báo này sẽ vẫn nằm trong hàng đợi cho đến khi thiết bị của người dùng kết nối mạng và dịch vụ truyền tin có thể gửi thông báo. Các chỉ dẫn mà bạn có thể đưa ra cho dịch vụ đẩy sẽ xác định cách thông báo đẩy được đưa vào hàng đợi.

Hướng dẫn này bao gồm những thông tin chi tiết như:

• Thời gian tồn tại của một thông báo đẩy. Điều này xác định khoảng thời gian một thông báo sẽ được đưa vào hàng đợi trước khi bị xoá và không được gửi.

• Xác định mức độ khẩn cấp của thông báo. Điều này hữu ích trong trường hợp dịch vụ truyền tin đang duy trì thời lượng pin của người dùng bằng cách chỉ gửi các thông báo có mức độ ưu tiên cao.

• Đặt tên "chủ đề" cho thông báo đẩy. Tên này sẽ thay thế mọi thông báo đang chờ xử lý bằng thông báo mới này.

Bước 3: Đẩy sự kiện trên thiết bị của người dùng

Sau khi chúng tôi gửi một thông báo đẩy, dịch vụ đẩy sẽ giữ tin nhắn của bạn trên máy chủ cho đến khi một trong các sự kiện sau xảy ra:

1. Thiết bị chuyển sang trạng thái trực tuyến và dịch vụ truyền tin sẽ gửi thông báo.
2. Thông báo hết hạn. Nếu điều này xảy ra, dịch vụ truyền tin sẽ xoá thông báo khỏi hàng đợi và thông báo đó sẽ không bao giờ được gửi.

Khi dịch vụ đẩy gửi một thông báo, trình duyệt sẽ nhận được thông báo đó, giải mã mọi dữ liệu và gửi một sự kiện push trong trình chạy dịch vụ của bạn.

Trình chạy dịch vụ là một tệp JavaScript "đặc biệt". Trình duyệt có thể thực thi JavaScript này mà không cần mở trang của bạn. Thậm chí, nó có thể thực thi JavaScript này khi trình duyệt bị đóng. Trình chạy dịch vụ cũng có các API (chẳng hạn như push) không có trong trang web (tức là các API không có trong tập lệnh trình chạy dịch vụ).

Bạn có thể thực hiện mọi tác vụ ở chế độ nền trong sự kiện "push" của trình thực thi dịch vụ. Bạn có thể thực hiện các lệnh gọi phân tích, lưu trang vào bộ nhớ đệm khi không có mạng và hiển thị thông báo.

Đó là toàn bộ quy trình gửi thông báo đẩy.

Nơi cần đến tiếp theo

• Tổng quan về thông báo đẩy trên web
• Cách hoạt động của tính năng thông báo đẩy
• Đăng ký cho người dùng
• Trải nghiệm người dùng về quyền
• Gửi thông báo bằng thư viện thông báo đẩy trên web
• Web Push Protocol
• Xử lý sự kiện đẩy
• Hiển thị thông báo
• Hành vi thông báo
• Các mẫu thông báo thường gặp
• Câu hỏi thường gặp về thông báo đẩy
• Các vấn đề thường gặp và cách báo cáo lỗi

Lớp học lập trình

• Xây dựng một ứng dụng thông báo đẩy
• Tạo một máy chủ thông báo đẩy