Tại sao nên sử dụng thông báo đẩy?
Thông báo trình bày các phần thông tin nhỏ cho người dùng. Ứng dụng 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à người dùng 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. Ví dụ:
Theo truyền thống, trình duyệt web phải bắt đầu trao đổi thông tin giữa máy chủ và ứng dụng bằng cách đưa ra yêu cầu. Mặt khác, công nghệ đẩy web cho phép bạn định cấu hình máy chủ để gửi thông báo khi phù hợp với ứng dụng của mình. Dịch vụ đẩy tạo các URL duy nhất cho mỗi worker dịch vụ đã đăng ký. Việc gửi thông báo đến URL của worker sẽ tạo ra các sự kiện trên worker đó, nhắc worker hiển thị thông báo.
Thông báo đẩy có thể giúp người dùng khai thác tối đa ứng dụng của bạn bằng cách nhắc họ mở lại ứng dụng và sử dụng ứng dụng dựa trên thông tin mới nhất.
Tạo và gửi thông báo
Tạo thông báo bằng Notifications API. Đối tượng Notification
có một chuỗi title
và một đối tượng options
. Ví dụ:
let title = 'Hi!';
let options = {
body: 'Very Important Message',
/* other options can go here */
};
let notification = new Notification(title, options);
title
hiển thị ở dạng in đậm khi thông báo đang hoạt động, còn body
chứa văn bản bổ sung.
Yêu cầu cấp quyền gửi thông báo
Để hiển thị thông báo, ứng dụng của bạn phải được người dùng cấp quyền:
Notification.requestPermission();
Thông báo đẩy hoạt động như thế nào?
Sức mạnh thực sự của thông báo đến từ sự kết hợp giữa worker dịch vụ và công nghệ đẩy:
Trình chạy dịch vụ có thể chạy ở chế độ nền và hiển thị thông báo ngay cả khi ứng dụng của bạn không hiển thị trên màn hình.
Công nghệ đẩy cho phép bạn định cấu hình máy chủ để gửi thông báo khi phù hợp với ứng dụng của mình. Dịch vụ đẩy tạo các URL duy nhất cho từng worker dịch vụ đã đăng ký. Việc gửi thông báo đến URL của worker sẽ tạo ra các sự kiện trên worker đó, nhắc worker hiển thị thông báo.
Trong quy trình mẫu sau, ứng dụng sẽ đăng ký một worker dịch vụ và đăng ký nhận thông báo đẩy. Sau đó, máy chủ sẽ gửi thông báo đến điểm cuối của gói thuê bao.
Ứng dụng và worker dịch vụ sử dụng JavaScript thuần tuý mà không cần thư viện bổ sung. Máy chủ được tạo bằng gói npm express
trên Node.js và sử dụng gói npm web-push
để gửi thông báo. Để gửi thông tin đến máy chủ, ứng dụng sẽ thực hiện lệnh gọi đến một URL POST mà máy chủ đã hiển thị.
Phần 1: Đăng ký trình chạy dịch vụ và đăng ký thông báo đẩy
Ứng dụng khách đăng ký trình chạy dịch vụ bằng
ServiceWorkerContainer.register()
. Trình chạy dịch vụ đã đăng ký sẽ tiếp tục chạy ở chế độ nền khi ứng dụng không hoạt động.Mã ứng dụng:
navigator.serviceWorker.register('sw.js');
Ứng dụng khách yêu cầu người dùng cấp quyền gửi thông báo.
Mã ứng dụng:
Notification.requestPermission();
Để bật thông báo đẩy, worker dịch vụ sử dụng
PushManager.subscribe()
để tạo gói thuê bao đẩy. Trong lệnh gọi đếnPushManager.subscribe()
, worker dịch vụ cung cấp khoá API của ứng dụng dưới dạng giá trị nhận dạng.Mã ứng dụng:
navigator.serviceWorker.register('sw.js').then(sw => {
sw.pushManager.subscribe({ /* API key */ });
});Các dịch vụ đẩy như Giải pháp gửi thông báo qua đám mây của Firebase hoạt động theo mô hình thuê bao. Khi một worker dịch vụ đăng ký một dịch vụ đẩy bằng cách gọi
PushManager.subscribe()
, dịch vụ đẩy sẽ tạo một URL dành riêng cho worker dịch vụ đó. URL này được gọi là điểm cuối của gói thuê bao.Ứng dụng khách gửi điểm cuối của gói thuê bao đến máy chủ ứng dụng.
Mã ứng dụng:
navigator.serviceWorker.register('sw.js').then(sw => {
sw.pushManager.subscribe({ /* API key */ }).then(subscription => {
sendToServer(subscription, '/new-subscription', 'POST');
});
});Mã máy chủ:
app.post('/new-subscription', (request, response) => {
// extract subscription from request
// send 'OK' response
});
Phần 2: Gửi thông báo
Máy chủ web gửi thông báo đến điểm cuối của gói thuê bao.
Mã máy chủ:
const webpush = require('web-push');
let options = { /* config info for cloud messaging and API key */ };
let subscription = { /* subscription created in Part 1*/ };
let payload = { /* notification */ };
webpush.sendNotification(subscription, payload, options);Thông báo được gửi đến điểm cuối của gói thuê bao sẽ kích hoạt các sự kiện đẩy với worker dịch vụ làm mục tiêu. Worker dịch vụ sẽ nhận được thông báo và hiển thị thông báo đó cho người dùng.
Mã trình chạy dịch vụ:
self.addEventListener('push', (event) => {
let title = { /* get notification title from event data */ }
let options = { /* get notification options from event data */ }
showNotification(title, options);
})Người dùng tương tác với thông báo, khiến ứng dụng web hoạt động nếu ứng dụng chưa hoạt động.
Các bước tiếp theo
Bước tiếp theo là triển khai thông báo đẩy!
Chúng tôi đã tạo một loạt lớp học lập trình để hướng dẫn bạn từng bước trong quy trình này.