Tổng quan về thông báo đẩy, lý do bạn có thể sử dụng và cách hoạt động của thông báo đẩy.
Thông báo đẩy là gì?
Thông báo đẩy cho phép bạn thu hút sự chú ý của người dùng thông tin ngay cả khi họ không sử dụng trang web của bạn. Chúng được gọi là thông báo push vì bạn có thể "đẩy" thông tin cho người dùng ngay cả khi họ không hoạt động. So sánh Công nghệ đẩy với Công nghệ kéo để hiểu rõ hơn về khái niệm này.
Thông báo cung cấp cho người dùng một lượng nhỏ thông tin. Các trang web có thể sử dụng thông báo để cho người dùng biết về các sự kiện quan trọng, có giới hạn về thời gian hoặc các hành động mà họ cần thực hiện. Giao diện của thông báo sẽ khác nhau giữa các nền tảng:
Thông báo đẩy và thông báo là hai công nghệ riêng biệt nhưng bổ sung cho nhau. Chế độ phân phối gửi dữ liệu là công nghệ dùng để gửi thông báo từ máy chủ của bạn đến người dùng ngay cả khi họ không sử dụng trang web của bạn. Thông báo là công nghệ để hiển thị thông tin được đẩy trên thiết bị của người dùng. Bạn có thể sử dụng thông báo mà không cần thông báo đẩy. Một ngày nào đó, bạn cũng có thể sử dụng thông báo đẩy mà không cần thông báo dành cho người dùng (thông báo đẩy ở chế độ im lặng) nhưng các trình duyệt hiện không cho phép điều đó. Trong thực tế, chúng thường được sử dụng cùng nhau. Người dùng không chuyên về kỹ thuật có thể sẽ không hiểu được sự khác biệt giữa thông báo đẩy và thông báo. Trong bộ sưu tập này, khi chúng ta nói thông báo đẩy, chúng tôi muốn nói đến sự kết hợp giữa việc đẩy một thông báo, tiếp theo là hiển thị thông báo đó dưới dạng thông báo. Khi nói đến thông báo đẩy, chúng tôi muốn nói đến chính công nghệ đẩy. Và khi nói đến thông báo, chúng tôi muốn nói đến chính công nghệ thông báo.
Tại sao bạn nên sử dụng thông báo đẩy?
- Đối với người dùng, thông báo đẩy là cách để nhận thông tin kịp thời, phù hợp và chính xác.
- Đối với bạn (chủ sở hữu trang web), thông báo đẩy là một cách để tăng mức độ tương tác của người dùng.
Thông báo đẩy hoạt động như thế nào?
Nhìn chung, các bước chính để triển khai thông báo đẩy là:
- Thêm logic ứng dụng để yêu cầu người dùng cấp quyền gửi thông báo đẩy, sau đó gửi thông tin nhận dạng ứng dụng khách đến máy chủ của bạn để lưu trữ trong cơ sở dữ liệu.
- Thêm logic máy chủ để đẩy thông báo đến thiết bị khách.
- Thêm logic ứng dụng để nhận thông báo đã được đẩy đến thiết bị và hiển thị chúng dưới dạng thông báo.
Phần còn lại của trang này sẽ giải thích chi tiết hơn về các bước này.
Nhận quyền gửi thông báo đẩy
Trước tiên, trang web của bạn cần được người dùng cho phép gửi thông báo đẩy.
Thao tác này sẽ được kích hoạt bằng cử chỉ của người dùng, chẳng hạn như nhấp vào nút Có bên cạnh lời nhắc Do you want to receive push notifications?. Sau khi xác nhận đó, hãy gọi Notification.requestPermission(). Hệ điều hành hoặc trình duyệt trên thiết bị của người dùng có thể sẽ hiển thị một số loại giao diện người dùng để chính thức xác nhận rằng người dùng muốn chọn nhận thông báo đẩy. Giao diện người dùng này thay đổi trên các nền tảng.
Đăng ký nhận thông báo đẩy cho khách hàng
Sau khi bạn được cấp quyền, trang web của bạn cần bắt đầu quy trình đăng ký cho người dùng nhận thông báo đẩy. Bạn có thể thực hiện việc này thông qua JavaScript bằng cách sử dụng Push API (API Đẩy). Bạn cần cung cấp khoá xác thực công khai trong quá trình đăng ký. Bạn sẽ tìm hiểu thêm về khoá này sau. Sau khi bạn bắt đầu quá trình thuê bao, trình duyệt sẽ gửi yêu cầu mạng đến một dịch vụ web còn gọi là dịch vụ đẩy. Bạn cũng sẽ tìm hiểu thêm về dịch vụ này sau.
Giả sử gói thuê bao đã thành công, trình duyệt sẽ trả về một đối tượng PushSubscription. Bạn sẽ cần lưu trữ dữ liệu này trong thời gian dài.
Thông thường, bạn có thể thực hiện việc này bằng cách gửi thông tin đến một máy chủ mà bạn kiểm soát, sau đó để máy chủ lưu trữ thông tin đó trong một cơ sở dữ liệu.
Gửi thông báo đẩy
Máy chủ của bạn không thực sự gửi trực tiếp thông báo đẩy đến ứng dụng. Dịch vụ đẩy sẽ thực hiện việc đó. Dịch vụ đẩy là một dịch vụ web do nhà cung cấp trình duyệt của người dùng kiểm soát. Khi muốn gửi thông báo đẩy đến ứng dụng, bạn cần gửi yêu cầu dịch vụ web đến một dịch vụ đẩy. Yêu cầu dịch vụ web mà bạn gửi tới dịch vụ đẩy được gọi là yêu cầu giao thức đẩy web. Yêu cầu giao thức đẩy web phải bao gồm:
- Dữ liệu cần đưa vào thông báo.
- Ứng dụng khách nào sẽ gửi thông báo.
- Hướng dẫn về cách dịch vụ đẩy sẽ gửi thông báo. Ví dụ: bạn có thể chỉ định rằng dịch vụ đẩy sẽ ngừng tìm cách gửi thông báo sau 10 phút.
Thông thường, bạn thực hiện yêu cầu giao thức đẩy web thông qua một máy chủ mà bạn kiểm soát. Tất nhiên, máy chủ của bạn không phải tự tạo yêu cầu dịch vụ web thô. Có những thư viện có thể xử lý việc đó cho bạn, chẳng hạn như web-push-libs. Tuy nhiên, cơ chế cơ bản là yêu cầu dịch vụ web qua HTTP.
Dịch vụ đẩy sẽ nhận yêu cầu của bạn, xác thực yêu cầu và chuyển thông báo đẩy đến ứng dụng phù hợp. Nếu trình duyệt của ứng dụng không có kết nối mạng, thì dịch vụ đẩy sẽ xếp thông báo đẩy vào hàng đợi cho đến khi trình duyệt có kết nối mạng.
Mỗi trình duyệt sử dụng bất kỳ dịch vụ đẩy nào mà nó muốn. Là nhà phát triển trang web, bạn không có quyền kiểm soát điều đó. Đây không phải là vấn đề vì yêu cầu giao thức đẩy web đã được chuẩn hoá. Nói cách khác, bạn không cần quan tâm đến dịch vụ đẩy mà nhà cung cấp trình duyệt đang sử dụng. Bạn chỉ cần đảm bảo rằng yêu cầu giao thức đẩy web của mình tuân thủ quy cách. Bên cạnh những thông số khác, thông số kỹ thuật cho biết yêu cầu phải bao gồm một số tiêu đề nhất định và dữ liệu phải được gửi dưới dạng luồng byte.
Tuy nhiên, bạn cần đảm bảo rằng mình đang gửi yêu cầu giao thức đẩy web đến đúng dịch vụ đẩy. Dữ liệu PushSubscription mà trình duyệt trả về cho bạn trong quá trình đăng ký cung cấp thông tin này. Đối tượng PushSubscription sẽ có dạng như sau:
{
"endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
"expirationTime": null,
"keys": {
"p256dh": "BGyyVt9FFV…",
"auth": "R9sidzkcdf…"
}
}
Về cơ bản, miền của endpoint là dịch vụ đẩy. Đường dẫn của endpoint là thông tin nhận dạng ứng dụng giúp dịch vụ đẩy xác định chính xác ứng dụng nào cần đẩy thông báo đến.
keys được dùng để mã hoá, điều này sẽ được giải thích ở phần tiếp theo.
Mã hoá thông báo đẩy
Dữ liệu mà bạn gửi đến một dịch vụ đẩy phải được mã hoá. Điều này ngăn dịch vụ đẩy không xem được dữ liệu mà bạn đang gửi đến ứng dụng.
Hãy nhớ rằng nhà cung cấp trình duyệt quyết định dịch vụ đẩy sẽ sử dụng và dịch vụ đẩy đó về mặt lý thuyết có thể không an toàn hoặc không an toàn. Máy chủ của bạn phải sử dụng keys được cung cấp trong PushSubscription để mã hoá các yêu cầu giao thức đẩy web.
Ký các yêu cầu về giao thức đẩy trên web
Dịch vụ đẩy cung cấp một cách để ngăn người khác gửi thông báo đến người dùng của bạn. Về mặt kỹ thuật, bạn không phải thực hiện việc này nhưng cách triển khai dễ nhất trên Chrome lại yêu cầu. Không bắt buộc trên Firefox. Các trình duyệt khác có thể yêu cầu trong tương lai.
Quy trình công việc này liên quan đến một khoá riêng tư và khoá công khai dành riêng cho ứng dụng của bạn. Quy trình xác thực diễn ra thường như sau:
- Bạn tạo khoá riêng tư và khoá công khai dưới dạng tác vụ một lần. Tổ hợp khoá riêng tư và công khai được gọi là khoá máy chủ ứng dụng. Bạn cũng có thể thấy các khoá này được gọi là khoá VAPID. VAPID là thông số kỹ thuật xác định quy trình xác thực này.
- Khi đăng ký một ứng dụng để nhận thông báo đẩy từ mã JavaScript, bạn cần cung cấp khoá công khai của mình. Khi dịch vụ đẩy tạo ra một
endpointcho thiết bị, dịch vụ này sẽ liên kết khoá công khai đã cung cấp vớiendpoint. - Khi gửi yêu cầu giao thức đẩy web, bạn sẽ ký một số thông tin JSON bằng khoá riêng tư của mình.
- Khi nhận được yêu cầu giao thức đẩy web của bạn, dịch vụ đẩy sẽ sử dụng khoá công khai đã lưu trữ để xác thực thông tin đã ký. Nếu chữ ký hợp lệ thì dịch vụ đẩy sẽ biết rằng yêu cầu đến từ một máy chủ có khoá riêng tư phù hợp.
Tuỳ chỉnh cách phân phối thông báo đẩy
Thông số kỹ thuật về yêu cầu của giao thức đẩy web cũng xác định các tham số cho phép bạn tuỳ chỉnh cách dịch vụ đẩy gửi thông báo đẩy đến ứng dụng. Ví dụ: bạn có thể tuỳ chỉnh:
- Thời gian tồn tại (TTL) của một thông báo, giúp xác định thời lượng mà dịch vụ đẩy sẽ cố gắng gửi thông báo.
- Tính cấp bách của thông báo rất hữu ích trong trường hợp dịch vụ đẩy đang duy trì thời lượng pin của ứng dụng bằng cách chỉ gửi các thông báo có mức độ ưu tiên cao.
- Chủ đề của một thông báo, sẽ thay thế mọi thông báo đang chờ xử lý có cùng chủ đề bằng thông báo mới nhất.
Nhận và hiển thị tin nhắn được đẩy dưới dạng thông báo
Sau khi bạn gửi yêu cầu giao thức đẩy web đến dịch vụ đẩy, dịch vụ đẩy sẽ giữ yêu cầu của bạn ở hàng đợi cho đến khi một trong các sự kiện sau xảy ra:
- Máy khách tham gia trực tuyến và dịch vụ đẩy phân phối thông điệp đẩy.
- Tin nhắn sẽ hết hạn.
Khi nhận được một thông báo được đẩy, trình duyệt ứng dụng sẽ giải mã dữ liệu thông báo đẩy và gửi một sự kiện push đến trình chạy dịch vụ của bạn. Về cơ bản, trình chạy dịch vụ là mã JavaScript có thể chạy ở chế độ nền, ngay cả khi trang web của bạn không mở hoặc trình duyệt đã đóng. Trong trình xử lý sự kiện push của trình chạy dịch vụ, bạn gọi ServiceWorkerRegistration.showNotification() để hiển thị thông tin dưới dạng thông báo.
Điểm đến tiếp theo
- Tổng quan về thông báo đẩy trên web
- Cách tính năng đẩy hoạt động
- Đăng ký người dùng
- Trải nghiệm người dùng của quyền
- Gửi thông báo bằng Thư viện đẩy trên web
- Giao thức đẩy web
- Xử lý sự kiện đẩy
- Hiện thông báo
- Hành vi thông báo
- Các mẫu thông báo phổ biến
- Câu hỏi thường gặp về Thông báo đẩy
- Các vấn đề thường gặp và lỗi báo cáo