Trang này được dịch bởi Cloud Translation API.

Sử dụng thông báo đẩy để thu hút và thu hút lại người dùng

Kate Jeffreys

Tại sao bạn nên sử dụng thông báo đẩy?

Thông báo cung cấp cho người dùng một lượng nhỏ thông tin. Các ứng dụng 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, 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 thông báo sẽ khác nhau tuỳ theo nền tảng. Ví dụ:

Thông 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 khách bằng cách đưa ra yêu cầu. Mặt khác, công nghệ đẩy trên 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 bạn. Dịch vụ đẩy sẽ tạo URL riêng biệt cho mỗi trình chạy dịch vụ đã đăng ký. Việc gửi thư tới URL của trình chạy dịch vụ sẽ làm tăng các sự kiện trên trình chạy dịch vụ đó, nhắc nó hiển thị thông báo.

Thông báo đẩy có thể giúp người dùng tận dụng tối đa ứng dụng của bạn bằng cách nhắc họ mở lại ứ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 API Thông báo. Đố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 được 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.

Nhận 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 làm như vậy:

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 nhân viên dịch vụ và công nghệ đẩy:

Service worker có thể chạy trong nền và hiện 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 bạn. Dịch vụ đẩy sẽ tạo URL riêng biệt cho mỗi trình chạy dịch vụ đã đăng ký. Việc gửi thư tới URL của trình chạy dịch vụ sẽ làm tăng các sự kiện trên trình chạy dịch vụ đó, nhắc nó hiển thị thông báo.

Trong quy trình ví dụ sau đây, ứng dụng đăng ký một trình chạy dịch vụ và đăng ký nhận thông báo đẩy. Sau đó, máy chủ gửi thông báo đến điểm cuối của gói thuê bao.

Ứng dụng khách và trình chạy dịch vụ sử dụng JavaScript vanilla mà không có thư viện bổ sung. Máy chủ này được xây dựng bằng gói express npm trên Node.js và dùng gói web-push npm để gửi thông báo. Để gửi thông tin đến máy chủ, máy khách thực hiện lệnh gọi đến URL POST mà máy chủ đã hiển thị.

Phần 1: Đăng ký một trình chạy dịch vụ và đăng ký Đẩy

Một ứng dụng khách đăng ký một trình chạy dịch vụ với ServiceWorkerContainer.register(). Trình chạy dịch vụ đã đăng ký sẽ tiếp tục chạy trong nền khi ứng dụng khách không hoạt động.

Mã khách hàng:
```
navigator.serviceWorker.register('sw.js');
```
Ứng dụng yêu cầu người dùng cấp quyền gửi thông báo.

Mã khách hàng:
```
Notification.requestPermission();
```
Để bật thông báo đẩy, trình chạy dịch vụ sẽ sử dụng PushManager.subscribe() để tạo một gói thuê bao đẩy. Trong lệnh gọi đến PushManager.subscribe(), trình chạy dịch vụ cung cấp khoá API của ứng dụng làm giá trị nhận dạng.

Mã khách hà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 gói thuê bao. Khi một trình chạy 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 trình chạy dịch vụ đó. URL này được gọi là điểm cuối của gói thuê bao.

Ứng dụng gửi điểm cuối của gói thuê bao đến máy chủ ứng dụng.

Mã khách hà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 gửi đến điểm cuối của gói thuê bao sẽ kích hoạt các sự kiện đẩy, trong đó trình chạy dịch vụ là mục tiêu. Service worker nhận thông báo và hiển thị cho người dùng dưới dạng thông báo.

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 chưa).

Các bước tiếp theo

Bước tiếp theo, hãy 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 của quy trình này.