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

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

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

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

  {
    "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ư nếu người dùng từ chối cấp quyền. Ngoài ra, xin lưu ý rằng Quyền notifications sẽ gây ra cảnh báo quyền sẽ được hiển thị khi cài đặt. Chrome cũng sẽ tắt tiện ích cho bất kỳ lượt cài đặt hiện có cho đến khi người dùng phê duyệt yêu cầu quyền mới. Bạn có thể hãy 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 thông báo đẩy và dịch vụ Thông báo đẩy

Sau khi thêm quyền vào manifest.json, bạn cần phải định cấu hình kết nối giữa phần phụ trợ và tiện ích. Kết nối này có thể chia thành hai phần - nhà cung cấp Đẩy và dịch vụ Đẩy. Đáp nhà cung cấp là SDK mà bạn đang 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 Đẩy nào cũng có thể hoạt động với Đẩy API (mặc dù các nhà cung cấp này có thể không cung cấp SDK giúp bạn dễ dàng tích hợp). Bạn sẽ cần thử nghiệm với SDK của nhà cung cấp để xem khả năng của mình. Đẩy dịch vụ là dịch vụ được đăng ký trên thiết bị của người dùng cuối để thiết bị 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à tính năng mà bạn không có kiểm soát, vì nó được mã hoá cứng vào từng trình duyệt. Đối với Chrome, Firebase Gửi thông báo qua đám mây là dịch vụ Đẩy. Mọi thông báo được đẩy sang Chrome mà người dùng sẽ được định tuyến qua đó.

Tự lưu trữ nhà cung cấp dịch vụ Gửi dữ liệu

Mọi nhà cung cấp dịch vụ Đẩy đều có thể hoạt động, tuy nhiên không phải mọi nhà cung cấp đều cung cấp SDK hoạt động được trong trình chạy dịch vụ. Bạn cần tham khảo ý kiến nhà cung cấp nếu gặp vấn đề để nó chạy. Tuy nhiên, bạn không cần sử dụng nhà cung cấp công khai. 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ể thử nghiệm thư viện này bằng cách sử dụng web-push-codelab.glitch.me. Cụ thể, bạn sẽ phải sao chép khoá công khai VAPID của máy chủ Đẩy để tạo phương thức Gửi trong trình duyệt. Khoá công khai này thực ra là một base64 giá trị nhị phân được mã hoá cần được giải mã và chuyển đổi thành Uint8Array để đăng ký bằng tính năng Đẩy của trình duyệt người quản lý. Có sẵn các thư viện để thực hiện logic này, nhưng 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ị đã cung cấp sẽ được chuyể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, thì bạn cần sao chép giá trị này vào phần Đăng ký đẩy của trang.

Sau khi có PushSubscription, bạn đã sẵn sàng đăng ký trình nghe đẩy thông báo 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()}"`);
});

Khi đã có sẵn trình nghe, bạn có thể gửi thông báo trên web-push-codelab.glitch.me và tin nhắn sẽ được đăng nhập 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 hiện có nhiều tài liệu về cách triển khai Web Push, kể cả trên blog của Chrome. Đối với phiên bản hoàn chỉnh của ví dụ được đề cập ở đây, có một phiên bản có sẵn trong kho lưu trữ mẫu của tiện ích.

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

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