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