专栏名称: 前端早读课
我们关注前端,产品体验设计,更关注前端同行的成长。 每天清晨五点早读,四万+同行相伴成长。
目录
相关文章推荐
前端早读课  ·  【第3531期】了解声明式 Web推送 ·  9 小时前  
前端大全  ·  前端行情变了,差别真的挺大。。。 ·  昨天  
国家林业和草原局  ·  飞越四大沙地 | 科技赋能 ... ·  昨天  
国家林业和草原局  ·  飞越四大沙地 | 科技赋能 ... ·  昨天  
共产党员  ·  黄宗德:英雄无悔 许党报国 ·  2 天前  
共产党员  ·  黄宗德:英雄无悔 许党报国 ·  2 天前  
前端早读课  ·  【第3529期】从自动补全到得力助手:训练 ... ·  2 天前  
51好读  ›  专栏  ›  前端早读课

【第3531期】了解声明式 Web推送

前端早读课  · 公众号  · 前端  · 2025-06-18 08:00

正文

请到「今天看啥」查看全文


的承诺生效,那我们就可以避免对这些 “静默推送” 进行惩罚。

挑战二 —— 追踪用户的数据

我们以前写过相关文章,未来也还会继续写 —— 隐私是一项基本人权。

自 Safari 第一个版本开始,我们就高度重视隐私。WebKit 的隐私保护标准远超现有的网页标准要求。随着网页平台的发展,我们的隐私保护策略也不断进化,这其中就包括像智能追踪防护(ITP)这样的功能,它会主动屏蔽或清除网站数据。

ITP 会删除你很久没有访问的网站的所有数据,包括 service worker 的注册信息。虽然这可能让网页开发者感到困扰,但它是保护用户隐私的关键措施。我们深知这是一项艰难的权衡,但为了用户的权益,我们甘愿承担。

但在实现 Web Push 时,我们面临了一个两难问题。由于推送订阅的创建和使用与 service worker 强绑定,一旦 ITP 删除了该 service worker 的注册信息,推送订阅也随之失效。既然强大的防追踪机制本质上与 JavaScript 驱动的 Web Push 相冲突,那么能否让 Web Push 通知在无需任何 JavaScript 的情况下就能正常运作呢?

那么,声明式 Web Push 实际上长什么样?

如何使用声明式 Web Push

要使用任何一种 Web Push,你首先都需要通过 PushManager 获取一个推送订阅。在 Apple 的平台上,Web Push 使用的是 Apple Push Notification service(APNs),也就是所有 Apple 设备上原生推送背后的服务。你不需要成为 Apple 开发者计划的成员也能使用它。

在传统 Web Push 中,唯一可用的 PushManager ServiceWorkerRegistration.pushManager
声明式 Web Push 还额外提供了 window.pushManager ,支持在不依赖 service worker 的前提下管理订阅。

const subscription await window.pushManager.subscribe({
    userVisibleOnly:true,
    applicationServerKey: arrayForPublicKey
});

如果你的网站根域下已经注册了一个 service worker,它和 window 对象会共享同一个推送订阅。但即使该 service worker 被移除,推送订阅仍然有效,不会受到影响。

发送推送消息的方式跟以前一样不变。要让通知以 “声明式” 方式被处理,推送消息的内容必须符合声明式标准 JSON 格式。这种标准化格式能确保浏览器拥有足够的信息,无需运行任何 JavaScript 代码就能显示一条用户可见通知。

例如:

 {
     "web_push": 8030,
     "notification": {
         "title": "Webkit.org — Meet Declarative Web Push",
         "lang": "en-US",
         "dir": "ltr",
         "body": "Send push notifications without JavaScript or service worker!",
         "navigate": "https://webkit.org/blog/16535/meet-declarative-web-push/",
         "silent": false,
         "app_badge": "1"
     }
 }

顶层的







请到「今天看啥」查看全文