Trong các 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. Thông báo đẩy từ Push API sẽ được worker 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ì thao tác Đẩy sẽ đánh thức trình chạy dịch vụ đó. Quy trình sử dụng API này trong các tiện ích cũng giống như quy trình sử dụng API này trên web mở.
Nhận quyền sử dụng API đẩy
Khi bạn đăng ký máy chủ Push trên một trang web thông thường, người dùng sẽ thấy một lời nhắc cấp quyền để cấp hoặc từ chối quyền đó. Với các tiện ích, 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 tệp 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 cấp 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 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 cấp 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 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 là hai phần – Nhà cung cấp dịch vụ đẩy và Dịch vụ đẩy. Nhà cung cấp là SDK mà bạn đang sử dụng để gửi thông báo đến Dịch vụ đẩy. Có nhiều lựa chọn và mọi nhà cung cấp dịch vụ đẩy có thể hoạt động với API đẩy (mặc dù họ có thể không cung cấp SDK giúp tích hợp dễ dàng). Bạn sẽ cần thử nghiệm với SDK của nhà cung cấp để xem có thể làm được gì. Dịch vụ Đẩy là dịch vụ đăng ký thiết bị của người dùng cuối để có thể được cảnh báo về mọi thông báo đẩy do Trình cung cấp dịch vụ đẩy gửi. Đây là điều mà bạn không kiểm soát được vì được mã hoá cứng vào từng trình duyệt. Đố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 ứng dụng này.
Tự lưu trữ nhà cung cấp dịch vụ Push
Mọi trình cung cấp Đẩ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 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. 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ủ Đẩ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 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ó các thư viện có sẵn để thực hiện logic này, nhưng tất cả những gì bạn cần là sau đây.
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 đó được truyề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 Đăng ký thông báo đẩy của 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()}"`);
});
Khi đã có trình nghe, bạn có thể gửi thông báo trên web-push-codelab.glitch.me và 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 Web Push, bao gồm cả blog của Chrome. Để biết phiên bản đầy đủ của ví dụ được đề cập ở đây, bạn có thể xem trong kho lưu trữ mẫu tiện ích của chúng tôi.
Thông báo đẩy im lặng
Bạn đã có thể nhận được một 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 là 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 trở nên kém hữu ích hơn rất nhiều nếu bạn muốn đẩy các lệnh hoặc bản cập nhật dữ liệu vào tiện ích mà không làm phiền người dùng về 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 âm thanh, không hiển thị cho người dùng. Để sử dụng thuộc tính 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
});