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

Trước khi đi vào API, hãy xem xét tính năng đẩy từ cấp cao, từ đầu đến cuối. Sau đó, khi chúng ta đi qua từng chủ đề hoặc API riêng lẻ, bạn sẽ biết được tầm quan trọng và lý do của việc này.

Ba bước chính để triển khai tính năng đẩy là:

  1. Thêm logic phía máy khách để người dùng đăng ký 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 đăng ký người dùng để nhận thông báo đẩy).
  2. Lệnh gọi API từ phần phụ trợ / ứng dụng của bạn, kích hoạt thông báo đẩy đến thiết bị của người dùng.
  3. Tệp JavaScript của trình chạy dịch vụ sẽ nhận được "sự kiện đẩy" khi có thông báo đẩy trên thiết bị. Trong JavaScript này, bạn có thể hiển thị thông báo.

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

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

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

Để đăng ký một người dùng, bạn cần thực hiện hai việc. Trước tiên, hãy xin quyền của người dùng để gửi thông báo đẩy cho họ. Thứ hai, nhận PushSubscription từ trình duyệt.

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

Tất cả việc này đều được thực hiện trong JavaScript bằng Push API.

Hỗ trợ trình duyệt

  • Chrome: 42.
  • Edge: 17.
  • Firefox: 44.
  • Safari: 16.

Nguồn

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

Khoá máy chủ ứng dụng (còn gọi là khoá VAPID) là khoá dành riêng cho máy chủ của bạn. Chúng 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 chính máy chủ đó kích hoạt thông báo đẩy cho người dùng đó.

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

Hãy nhớ gửi Gói thuê bao đẩy đến phần phụ trợ của mình.

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

Khi muốn gửi thông báo đẩy đến người dùng, bạn cần thực hiện lệnh gọi API đến một dịch vụ đẩy. Lệnh gọi API này sẽ bao gồm 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 bạn có thể tự hỏi bản thân:

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

Dịch vụ đẩy là gì và thuộc về ai?

Dịch vụ đẩy nhận được một yêu cầu mạng, xác thực yêu cầu đó rồi phân phối thông báo đẩy đến trình duyệt thích hợp. Nếu trình duyệt ở chế độ ngoại tuyến, thông báo sẽ được xếp hàng đợi cho đến khi trình duyệt trực tuyến.

Mỗi trình duyệt có thể sử dụng bất kỳ dịch vụ đẩy 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ụ đẩy đều mong đợi cùng một lệnh gọi API. Tức là bạn không cần quan tâm đến dịch vụ đẩy là gì. Bạn chỉ cần đảm bảo rằng lệnh gọi API của mình là hợp lệ.

Để lấy URL thích hợp kích hoạt thông báo đẩy (tức là URL của 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ụ đẩy sẽ là " random-push-service.com" và mỗi điểm cuối là duy nhất cho 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 tính năng đẩy, bạn sẽ nhận thấy mẫu này.

Chúng tôi 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 rằng mọi dịch vụ đẩy web đều dự kiến có cùng một lệnh gọi API. API đó là Giao thức đẩy web. Đây là một tiêu chuẩn IETF xác định cách bạn thực hiện lệnh gọi API đến một dịch vụ đẩy.

Lệnh gọi API yêu cầu bạn phải đặt một số tiêu đề nhất định và dữ liệu phải là 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 có thể làm gì?

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

Dữ liệu mà bạn gửi kèm thông báo đẩy phải được mã hoá. Lý do là để ngăn các dịch vụ đẩy (có thể là bất kỳ ai) xem dữ liệu được gửi bằng 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ụ đẩy nào. Điều này có thể mở ra cơ hội cho trình duyệt sử dụng dịch vụ đẩ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à đưa thông báo vào hàng đợi. Thông báo này sẽ vẫn trong hàng đợi cho đến khi thiết bị của người dùng có kết nối mạng và dịch vụ đẩy có thể gửi thông báo. Hướng dẫn mà bạn có thể đưa ra cho dịch vụ đẩy 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 các thông tin chi tiết như:

  • Thời gian tồn tại của thông báo đẩy. Thuộc tính này xác định thời gian một thông báo phải xếp hàng trước khi bị xoá và không được phân phố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ụ đẩy đang duy trì thời lượng pin của người dùng bằng cách chỉ phân phối thông báo có mức độ ưu tiên cao.

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

Khi muốn gửi thông báo đẩy, máy chủ của bạn sẽ tạo một yêu cầu giao thức đẩy web đến một dịch vụ đẩ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ữ thông báo của bạn trên máy chủ của mình cho đến khi một trong các sự kiện sau xảy ra:

  1. Thiết bị sẽ kết nối mạng và dịch vụ đẩy sẽ phân phối thông báo.
  2. Tin nhắn hết hạn. Nếu điều này xảy ra, dịch vụ đẩy sẽ xoá thông báo khỏi hàng đợi và thông báo đó sẽ không bao giờ được phân phối.

Khi dịch vụ đẩy phân phố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 worker dịch vụ.

service worker là 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. Trình duyệt thậm chí có thể thực thi JavaScript này khi đóng. Trình chạy dịch vụ cũng có các API, chẳng hạn như đẩy, không có trong trang web (tức là các API không có trong tập lệnh của trình chạy dịch vụ).

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

Khi một thông báo đẩy được gửi từ dịch vụ đẩy đến thiết bị của người dùng, worker dịch vụ của bạn sẽ nhận được một sự kiện đẩy

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

Bước tiếp theo

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