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 nên sử dụng thông báo đẩy?

Thông báo trình bày những phần nhỏ thông tin cho người dùng. Ứ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 những 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 tuỳ theo nền tảng. Ví dụ:

Thông báo trên thiết bị Android.

Thông báo trên MacBook.

Theo truyền thống, các trình duyệt web phải bắt đầu trao đổi thông tin giữa máy chủ và máy khách bằng cách đưa ra yêu cầu. Mặt khác, công nghệ thông báo đẩy trên web cho phép bạn định cấu hình máy chủ để gửi thông báo khi cần thiết cho ứng dụng của bạn. Dịch vụ đẩy sẽ tạo các URL riêng biệt cho từng worker dịch vụ đã đăng ký. Việc gửi thông báo đến URL của một worker dịch vụ sẽ tạo ra các sự kiện trên worker dịch vụ đó, nhắc worker dịch vụ hiển thị một 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 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);

Biểu tượng title sẽ được hiển thị bằng chữ đậm khi thông báo đang hoạt động, còn biểu tượng 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:

Notification.requestPermission();

Lưu ý: Nền tảng web khuyến khích nhà phát triển yêu cầu quyền nhận thông báo khi người dùng hiểu rõ nội dung yêu cầu và lý do yêu cầu. Đưa ra lời nhắc cấp quyền để phản hồi cử chỉ của người dùng và khi giá trị của thông báo là rõ ràng. Tránh hiển thị lời nhắc cấp quyền ngay khi người dùng truy cập vào trang.

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 các worker dịch vụ và công nghệ truyền tin:

• Service worker 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 xuất hiện 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 cần thiết cho ứng dụng của bạn. Dịch vụ đẩy sẽ tạo các URL riêng biệt cho từng worker dịch vụ đã đăng ký. Việc gửi thông báo đến URL của một worker dịch vụ sẽ tạo ra các sự kiện trên worker dịch vụ đó, nhắc worker dịch vụ hiển thị một thông báo.

Trong quy trình ví dụ sau đây, một ứ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 một 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ó 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ủ, máy khách sẽ 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ý nhận thông báo đẩy

1. Một ứ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 máy khách không hoạt động.

   Mã ứng dụng:

   navigator.serviceWorker.register('sw.js');
   

2. Ứ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();
   

3. Để bật thông báo đẩy, service worker 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ụ sẽ 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ý dịch vụ truyền tin bằng cách gọi PushManager.subscribe(), dịch vụ truyền tin sẽ tạo một URL riêng biệt cho worker dịch vụ đó. URL này được gọi là điểm cuối đăng ký.

4. Ứng dụng 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

1. 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);
   

2. Thông báo được gửi đến điểm cuối đăng ký sẽ kích hoạt các sự kiện đẩy với trình chạy dịch vụ làm mục tiêu. Service worker 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);
   })
   

3. Người dùng tương tác với thông báo, giúp ứng dụng web hoạt động nếu ứng dụng này 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.