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ỳ nhà cung cấp Push nào để gửi thông báo đẩy và tin nhắn. Thông báo đẩy từ Push API sẽ được trình chạy dịch vụ xử lý ngay khi nhận được. Nếu trình chạy dịch vụ đã bị tạm ngưng, thì một thông báo đẩy sẽ kích hoạt lại trình chạy dịch vụ. Quy trình sử dụng API này trong các tiện ích giống hệt như quy trình bạn sử dụng API này trên web mở.

Nhận quyền sử dụng Push API

Khi bạn đăng ký một máy chủ Push 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 để cấp hoặc từ chối quyền đó. Những phần mở rộng có lời nhắc sẽ không xuất hiện. Để sử dụng Push API 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 sẽ dẫn đến lỗi ngay lập tức, kết quả tương tự như khi người dùng từ chối quyền. Ngoài ra, hãy lưu ý rằng quyền notifications sẽ khiến cảnh báo về quyền xuất hiện 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 phê duyệt 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 về cảnh báo quyền.

Nhà cung cấp dịch vụ truyền tin và dịch vụ truyền tin

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

Tự lưu trữ nhà cung cấp Push

Mọi nhà cung cấp Push đề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 các worker dịch vụ. Bạn sẽ 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 này. 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 cách sử dụ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ủ Push để tạo đăng ký Push 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. Bạn sẽ cần giải mã và chuyển đổi giá trị này thành Uint8Array để đăng ký với Push manager (Trình quản lý thông báo đẩy) của trình duyệt. Có các thư viện để thực hiện logic này, nhưng bạn chỉ cần những thông tin sau.

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ị được cung cấp đó sẽ được truyền vào Trình quản lý thông báo đẩ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ủ Đẩy. 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 (Đăng ký nhận thông báo đẩy) của trang.

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

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

Khi đã thiết lập trình nghe, bạn có thể gửi một thông báo trên web-push-codelab.glitch.me và các thông báo sẽ được ghi 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 Thông báo đẩy trên web, kể cả trên blog của Chrome. Để xem phiên bản đầy đủ của ví dụ được đề cập ở đây, bạn có thể xem một phiên bản trong kho lưu trữ mẫu tiện ích của chúng tôi.

Thông báo đẩy không hiển thị

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

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