在扩展程序中,您可以使用任何推送提供程序发送推送通知和消息。Service Worker 在收到 Push API 推送后,将立即对其进行处理。如果 Service Worker 已暂停,则推送将唤醒它。在扩展程序中使用它的过程与在开放网络上使用它的过程完全一样。
获取使用 Push API 的权限
当您在常规网站上注册推送服务器时,系统会向用户显示授予或拒绝推送服务器的权限提示。使用扩展程序时,系统不会显示提示。如需在扩展程序中使用 Push API,您需要在 manifest.json 中设置 notifications
权限
{
"manifest_version": 3,
...
"permissions": ["notifications"]
如果您缺少此权限,则与 registration.pushManager
的任何交互都会导致立即出现错误,错误与用户拒绝权限的结果相同。另请注意,notifications
权限会导致在安装时显示权限警告。在用户批准新的权限请求之前,Chrome 还会针对任何现有安装停用该扩展程序。如需详细了解如何处理这种情况,请参阅权限警告指南。
推送提供程序和推送服务
将权限添加到 manifest.json 后,您需要配置后端与扩展程序之间的连接。这种连接可以分为两个部分:推送提供程序和推送服务。提供程序是您用来向推送服务发送消息的 SDK。 有许多不同的选项,任何 Push 提供程序都可以适用于 Push API(但它们提供的 SDK 可能不便于集成)。您将需要使用提供方的 SDK 进行实验,看看可以实现哪些功能。推送服务是最终用户设备注册的服务,因此可以收到推送提供程序发送的任何推送消息的提醒。这是您无法控制的内容,因为它已硬编码到各个浏览器中。在 Chrome 中,Firebase Cloud Messaging 是推送服务。推送到 Chrome 用户的任何消息都将通过该路径路由。
自行托管推送提供程序
任何 Push 提供程序都可以运行,但并非所有提供程序都提供可在 Service Worker 中运行的 SDK。如果在运行过程中遇到问题,您需要咨询您的提供方。但是,您无需使用公共提供程序。使用 web-push 等库,您可以托管自己的后端。
您可以使用 web-push-codelab.glitch.me 测试此库。具体来说,您需要复制推送服务器的 VAPID 公钥,才能在浏览器中生成推送订阅。此公钥实际上是 base64 编码的二进制值,需要将其解码并转换为 Uint8Array,才能在浏览器的推送管理器中注册。有一些库可用于执行此逻辑,但下面要用到的就是这些。
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;
}
提供的值将传递到推送管理器
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();
subscribe
函数会返回 PushSubscription,这是一个包含推送服务器元数据的对象。由于您使用的是 web-push-codelab.glitch.me,因此需要将此值复制到页面的“推送订阅”部分。
拥有 PushSubscription 后,您就可以在扩展程序的 Service Worker 中注册推送消息监听器了。
self.addEventListener('push', function (event) {
console.log(`Push had this data/text: "${event.data.text()}"`);
});
监听器就位后,您可以在 web-push-codelab.glitch.me 上提交消息,这些消息将登录到 Service Worker 的控制台。
由于 Web Push 是一种开放式 Web 标准,因此已有很多有关如何实现 Web 推送的文档,包括 Chrome 的博客。如需查看此处介绍的示例的完整版本,我们的扩展程序示例代码库中提供了一个完整版本。
静默推送
自 Chrome 88 中引入 Manifest v3 后,您就可以在 Manifest V3 扩展程序中接收推送通知。不过,一直以来都要求通知显示某种用户可见的提示,例如网络通知。如果您希望向扩展程序推送命令或数据更新,而不用不必要的信息给用户带来困扰,这就会大幅降低您的实用性。从 Chrome 121 开始,扩展程序可以将 userVisibleOnly 设为 false
。您现在可以向用户发送不面向用户的静默推送通知。为此,请在调用 pushManager.subscribe
时将 userVisibleOnly
设置为 false
。
let subscription = await self.registration.pushManager.subscribe({
userVisibleOnly: false,
applicationServerKey
});