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

Kate Jeffreys
Kate Jeffreys

Thông báo hiển thị một số 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 thời gian hoặ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ụ:

Một thông báo trên thiết bị Android.
Một thông báo trên MacBook.

Theo lệ 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 vào thời điểm phù hợp với ứng dụng. Dịch vụ đẩy tạo các URL duy nhất cho mỗi trình chạy dịch vụ đã đăng ký. Việc gửi thông báo đến 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 trình chạy dịch vụ 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 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 hiển thị ở dạng đậm khi thông báo hoạt động, trong khi body chứa văn bản bổ sung.

Nhận quyền gửi thông báo

Để cho thấy thông báo, ứng dụng của bạn phải được người dùng cho phép:

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 trình chạy dịch vụ và công nghệ đẩy:

  • 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 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 tạo các URL duy nhất cho mỗi trình chạy dịch vụ đã đăng ký. Việc gửi thông báo đến 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 trình chạy dịch vụ hiển thị thông báo.

Trong quy trình ví dụ sau, một ứ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 và trình chạy dịch vụ sử dụng JavaScript dạng vanilla mà không có thêm thư viện. Máy chủ này được xây dựng bằng gói npm express trên Node.js và sử 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ý trình chạy dịch vụ và đăng ký Đẩ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 ứng dụng không hoạt động.

    Mã ứng dụng khách:

    navigator.serviceWorker.register('sw.js');
  2. Ứng dụng yêu cầu người dùng cấp quyền gửi thông báo.

    Mã ứng dụng khách:

    Notification.requestPermission();
  3. Để bật thông báo đẩy, trình chạy dịch vụ sẽ sử dụng PushManager.subscribe() để tạo 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ã ứng dụng khách:

    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 trên 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ụ nà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.

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

    Mã ứng dụng khách:

    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 các sự kiện đẩy kích hoạt điểm cuối của gói thuê bao với mục tiêu là trình chạy dịch vụ. Service worker nhận tin nhắn và hiển thị tin nhắn đó 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);
    })
  3. Người dùng tương tác với thông báo, kích hoạt ứng dụng web nếu ứng dụng đó chưa hoạt động.

Các bước tiếp theo

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 thực hiện từng bước của quy trình.