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.");

进一步阅读




如希望撰写评论,请发邮件至 me@tianhegao.com (直接点击邮箱可自动跳转至默认邮箱App,并填写收信人和邮件主题)或者点击这里在线留言,我会挑选对读者有价值的评论附加到文章末尾。



可通过以下渠道赞赏此文