Push notifications are now supported cross-browser

https://web.dev/push-notifications-in-all-modern-browsers/

适用于向用户提供及时、相关信息的应用程序(如新闻和体育应用)或希望向用户发送特价或销售通知的电子商务网站。

检查浏览器是否支持:

console.log(window.PushManager)
console.log(navigator.serviceWorker)

结果:

// Firefox Dev v112.0b7
/**
 * function ()
 * ServiceWorkerContainer
 */

// Chrome v111
/**
 * PushManager()
 * ServiceWorkerContainer
 */

如果浏览器支持,可以用 asyncawait 关键词注册 service worker 并订阅推送通知。一个 Demo:

// 检查浏览器是否支持推送通知
if ("serviceWorker" in navigator && "PushManager" in window) {
  try {
    // 注册 service worker
    const swReg = await navigator.serviceWorker.register("/sw.js");

    // 订阅推送通知
    const pushSubscription = await swReg.pushManager.subscribe({
      userVisibleOnly: true
    });

    // 保存推送订阅至数据库
    savePushSubscription(pushSubscription);
  } catch (error) {
    // 处理错误
    console.error("Error subscribing for push notifications.", error)
  }
} else {
  // 当前浏览器不支持推送通知
  console.error("Push notifications are not supported by the browser.");

进一步阅读

欢迎通过「邮件」或者点击「这里」告诉我你的想法
Welcome to tell me your thoughts via "email" or click "here"