Sử dụng tính năng đẩy dữ liệu web

Trong các tiện ích, bạn có thể sử dụng bất kỳ Trình cung cấp dịch vụ đẩy nào để gửi thông báo đẩy và tin nhắn. Một yêu cầu đẩy từ API Push sẽ được trình chạy dịch vụ của bạn xử lý ngay khi nhận được. Nếu trình chạy dịch vụ đã bị tạm ngưng, một thao tác đẩy sẽ đánh thức trình chạy đó trở lại. Quy trình sử dụng API này trong các tiện ích cũng giống như quy trình bạn sử dụng trên web mở.

Yêu cầu cấp quyền sử dụng Push API

Khi bạn đăng ký một máy chủ đẩy trên một trang web thông thường, người dùng sẽ thấy lời nhắc cấp quyền hoặc từ chối cấp quyền. Với các tiện ích, lời nhắc sẽ không hiển thị. Để sử dụng API Đẩy trong tiện ích, bạn cần đặt quyền notifications trong manifest.json

  {
    "manifest_version": 3,
    ...
    "permissions": ["notifications"]

Nếu bạn thiếu quyền này, thì mọi hoạt động tương tác với registration.pushManager đều sẽ dẫn đến lỗi ngay lập tức, tương tự như khi người dùng từ chối cấp quyền. Ngoài ra, hãy lưu ý rằng quyền notifications sẽ khiến cảnh báo quyền hiển thị khi cài đặt. Chrome cũng sẽ tắt tiện ích này cho mọi lượt cài đặt hiện có cho đến khi người dùng chấp thuận yêu cầu cấp quyền mới. Bạn có thể tìm hiểu thêm về cách xử lý vấn đề này trong hướng dẫn cảnh báo quyền.

Nhà cung cấp dịch vụ đẩy và dịch vụ đẩy

Sau khi thêm quyền vào manifest.json, bạn cần định cấu hình kết nối giữa phần phụ trợ và tiện ích. Mối kết nối này có thể được chia thành 2 phần: Nhà cung cấp dịch vụ đẩy và Dịch vụ đẩy. Nhà cung cấp là SDK mà bạn sử dụng để gửi thông báo đến dịch vụ Đẩy. Có nhiều tuỳ chọn và bất kỳ Trình cung cấp dữ liệu đẩy nào đều có thể tương thích với API Đẩy (mặc dù họ có thể không cung cấp SDK giúp việc tích hợp trở nên đơn giản). Bạn sẽ cần thử nghiệm với SDK của nhà cung cấp để xem khả năng thực hiện việc này. Dịch vụ Đẩy là dịch vụ được đăng ký trên thiết bị của người dùng cuối, vì vậy, dịch vụ này có thể được cảnh báo cho bất kỳ thông báo đẩy nào do nhà cung cấp dịch vụ Đẩy gửi. Đây là việc bạn không có quyền kiểm soát vì nó được mã hoá cứng vào các trình duyệt riêng lẻ. Đối với Chrome, Giải pháp gửi thông báo qua đám mây của Firebase là dịch vụ Đẩy. Mọi thông báo được đẩy đến người dùng Chrome sẽ được định tuyến thông qua trình duyệt này.

Tự tổ chức một nhà cung cấp Dịch vụ đẩy

Mọi nhà cung cấp dịch vụ Đẩy đều có thể hoạt động, tuy nhiên, không phải nhà cung cấp nào cũng cung cấp SDK hoạt động trong trình chạy dịch vụ. Bạn cần tham khảo ý kiến của nhà cung cấp nếu gặp vấn đề khi chạy ứng dụng. Tuy nhiên, bạn không cần sử dụng nhà cung cấp công khai. Khi sử dụng các thư viện như web-push, bạn có thể lưu trữ phần phụ trợ của riêng mình.

Bạn có thể kiểm thử thư viện này bằng web-push-codelab.glitch.me. Cụ thể, bạn sẽ cần sao chép khoá công khai VAPID của máy chủ đẩy để tạo gói thuê bao Đẩy trong trình duyệt. Khoá công khai này thực sự là một giá trị nhị phân được mã hoá base64. Khoá này cần được giải mã và chuyển đổi thành Uint8Array để đăng ký với Trình quản lý đẩy của trình duyệt. Có sẵn các thư viện để thực hiện logic này, nhưng tất cả những gì cần thiết sau đây là tất cả những gì cần thiết.

function urlB64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');

  const rawData = atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

Giá trị mà bạn cung cấp sẽ được chuyển vào Trình quản lý đẩy

const SERVER_PUBLIC_KEY = '_INSERT_VALUE_HERE_';
const applicationServerKey = urlB64ToUint8Array(SERVER_PUBLIC_KEY);

async function subscribe() {
  try {
    let subscription = await self.registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey
    });

    console.log(`Subscribed: ${JSON.stringify(subscription,0,2)}`);

    return subscription
  } catch (error) {
    console.error('Subscribe error: ', error);
  }
}

const subscription = await subscribe();

Hàm subscribe trả về một PushSubscription, một đối tượng chứa siêu dữ liệu của máy chủ Push. Vì bạn đang sử dụng web-push-codelab.glitch.me, nên bạn cần sao chép giá trị này vào phần Push Subscription trên trang.

Sau khi có PushSubscription, bạn đã sẵn sàng đăng ký trình nghe cho thông báo đẩy trong trình chạy dịch vụ của tiện ích của chúng tôi.

self.addEventListener('push', function (event) {
  console.log(`Push had this data/text: "${event.data.text()}"`);
});

Với trình nghe đã sẵn sàng, bạn có thể gửi thông báo trên web-push-codelab.glitch.me và thông báo sẽ được đăng vào bảng điều khiển của trình chạy dịch vụ.

Vì đây là một tiêu chuẩn web mở nên có rất nhiều tài liệu hiện có về cách triển khai tính năng Gửi dữ liệu web, bao gồm cả trên blog của Chrome. Để xem phiên bản hoàn chỉnh của ví dụ được đề cập ở đây, bạn có thể tham khảo kho lưu trữ mẫu tiện ích của chúng tôi.

Đẩy im lặng

Bạn có thể nhận được Thông báo đẩy trong tiện ích Manifest v3 kể từ khi Manifest v3 được ra mắt trong Chrome 88. Tuy nhiên, chúng tôi luôn có yêu cầu rằng thông báo phải hiển thị một số loại lời nhắc mà người dùng có thể nhìn thấy, chẳng hạn như Thông báo trên web. Điều này khiến tiện ích ít hữu ích hơn nhiều nếu bạn muốn đẩy lệnh hoặc cập nhật dữ liệu vào tiện ích mà không làm phiền người dùng với thông tin không cần thiết. Kể từ Chrome 121, các tiện ích có thể đặt userVisibleOnly thành false. Giờ đây, bạn có thể gửi các thông báo đẩy ở chế độ im lặng, không dành cho người dùng cho người dùng. Để sử dụng tính năng này, hãy đặt userVisibleOnly thành false khi bạn gọi pushManager.subscribe.

let subscription = await self.registration.pushManager.subscribe({
  userVisibleOnly: false,
  applicationServerKey
});