进一步了解声明式网页推送

我叫 Brady Eidson 是 WebKit 架构团队的一名工程师 很高兴能和大家分享网页推送通知 的最新进展

推送通知是现代网络的重要组成部分 就像它们对任何现代平台 都至关重要一样

早在 2009 年 iPhone OS 3 时期 我们就开始在 Apple 平台中 构建推送通知功能 我们是这个领域的先行者 但显然推送通知适合所有现代平台 它们很快就被添加到 macOS、 其他桌面平台 和其他移动平台 几乎在一夜之间 App 就可以假定 推送通知 是平台内置的功能

早期 我们不断调整推送功能 服务原生 App 的方式 以寻找开发者和用户之间的 最佳平衡点 我们从一开始就知道 推送通知适合网络 并且希望在细节上深思熟虑 我们在 Safari 浏览器 7 中 添加了 Safari 浏览器推送通知 开发者积极采用 Safari 浏览器推送 用户也乐于使用 所以我们知道自己做对了 Safari 浏览器推送需要 与 Apple 的系统紧密集成 因此我们无法以其他浏览器 可实现的方式将它标准化 当然 所有浏览器都需要推送通知 Web 标准社区忙于开发网页推送 一两年后 首次有浏览器推出了这项功能

在 Web 标准领域 这是一个高度关注 JavaScript 功能的时代 最初的网页推送被设计为 一个极其灵活的系统 100% 由你编写的 JavaScript 代码驱动 我们为在运行 JavaScript 时 能榨取出每一滴性能 而感到自豪 但所有软件工程师都知道 任何需要编写和维护的代码 都比不编写代码更容易出现错误

即使在效率最高的 JavaScript 引擎中执行 运行任何代码的效率 也不如不运行代码

这种方法的另一个缺点是隐私问题 网站数据是跟踪用户浏览行为的载体 这就是为什么智能跟踪预防会限制 原始网页推送所需 JavaScript 的 生命周期

在 iOS、macOS 和 Safari 浏览器推送通知中 推送消息本身包含 用户可见通知的 标准化描述 不需要开发或执行 App 特有的代码来显示它

原生 App 甚至不需要 在设备上运行代码 就能显示推送通知 已被 iOS 卸载的 App 也能 正常显示通知

在将原始的网页推送添加到 我们的浏览器时 我们观察到了一些有趣的现象 即使有标准提供的灵活性 许多网站仍然以易于解析的 JSON 格式发送推送消息 它们的 Service Worker JavaScript 所做的仅仅是将它转换为 显示通知的 API 调用 由于我们有较长的 iOS、macOS 和 Safari 浏览器推送通知开发历史 这对我们来说是有意义的 它为我们提供了一个 简单直接的想法 如果提前在 JSON 中声明通知 是一种常见情况 我们可以改进网页推送来迎合你

通过省去依赖你编写任何代码的步骤 你可以获得原生 App 从一开始就享有的所有好处

声明式网页推送具有易用性、 高效性和透明度 使用它很简单 只需以标准格式发送推送消息 而且设置几乎不需要代码

我们在设计它时充分考虑了开放网络 并在过程中与标准社区进行合作 它还设计为向后兼容 尚不支持它的浏览器 声明式网页推送是 网页的渐进式增强 如果你已经熟悉原始网页推送 那么你知道的概念仍然适用

由于建立在既定标准之上 我们将介绍声明式网页推送的新功能 并在过程中回顾 原始网页推送的组成部分 首先对原始网页推送进行 一个概要介绍

它几乎完全依赖于 已安装的 Service Worker 形式 的 JavaScript Service Worker 包含 处理“推送”事件的代码 以显示通知

然后你需要一个推送订阅 它包含服务器 访问用户浏览器所需的信息 例如用于发送推送消息的 URL 响应用户手势时 JavaScript 请求推送订阅 然后将它发送到服务器以供稍后使用

当需要发送通知时 你使用订阅中的 URL 发送推送消息 在 WebKit 浏览器中 你将把它发送 为我们的原生 App 提供支持的 Apple 推送通知服务 但你不需要 Apple 开发者账户 即可使用这些订阅

消息到达浏览器 浏览器查找 负责的 Service Worker 并启动它 浏览器向这个 Service Worker 分派 一个推送事件 其中包括你在推送消息中 发送的所有数据

Service Worker 解析消息 并构造对 showNotification API 的 JavaScript 调用 以显示通知

之后当用户轻点或点按通知时 如果相应的 Service Worker 没有运行 浏览器会再次启动它 并向它分派 NotificationClick 事件 然后 你的处理程序就会 做一些有用的事情 基本上就是 打开一个指向 URL 的窗口

这就是目前原始网页推送的工作方式 这里所描述的大多数步骤 都由你需要编写 并且浏览器需要运行 的 JavaScript 来处理

虽然声明式网页推送 并不能完全消除 JavaScript 但它已经让我们接近这一点 在声明式网页推送中 你唯一需要的 JavaScript 是获取推送订阅 不再需要 Service Worker

你发送声明式推送消息后 浏览器会像以前一样接收它 并进行解析 以寻找有效的 JSON

它确保 JSON 描述 有效的用户可见通知 然后自动显示通知

浏览器还知道如何自动处理 通知上的轻点或点按手势 我们稍后将介绍浏览器 怎么知道该做什么 但首先回到获取推送订阅 所需的 JavaScript 我将介绍之前使用 原始网页推送时的代码 然后介绍现在使用 声明式网页推送时的代码

对于用过原始网页推送的人来说 这看起来会很熟悉

正如我提到过的 原始网页推送 需要安装 Service Worker 才能继续后面的步骤 注册 Service Worker 后 你可以访问它的 PushManager 对象 来响应用户 请求推送订阅的手势

使用声明式网页推送时 获取推送订阅的代码 与以前几乎相同 但由于不需要 Service Worker PushManager 现在也可用于 window 对象

接下来就是奇妙之处 如果你使用的是纯声明式网页推送 那么这就是你需要编写的全部代码 声明式网页推送为推送消息定义了 标准的 JSON 格式 这是我们团队的关键基础设施工具 Browser Pets 网页版 App 的 最小有效消息示例

它包括一个描述用户可见通知的 必须条目

这个通知必须包含标题文本 以及用户轻点或点按通知时 要导航到的 URL

而这个顶部条目 是声明式推送消息的魔法值 你必须始终有一个 web_push 键 值为 8030

8030 是互联网工程 任务组 RFC 标准中 网页推送消息的原始标准 我们认为基本不可能 有人会将它包括在内

还记得我们介绍过声明式推送消息 在浏览器中的流程

寻找魔法键是这个流程的一部分

如果浏览器尝试 从推送消息解析 JSON 但失败了 会发生什么？ 在这种情况下它会回退到 原始网页推送 使用 Service Worker 处理消息

如果 JSON 没有魔法键 它也会回退到原始网页推送

如果推送消息包含 JSON 并且有魔法键 但它没有描述有效的通知 会发生什么？

在这种情况下 浏览器什么也不做 直接把消息丢弃 但如果推送消息通过了 所有这些检查 浏览器就会 自动显示通知

通知标题和导航 URL 是有效通知的最低要求 但如果你有使用原始网页推送的经验 就会知道 JavaScript 在创建通知时 有更多的选项 声明式网页推送支持所有这些选项

在这里 我们指定了消息的正文 和一个通知标签 并请求平台播放 默认通知声音 如果可能的话 这些只是示例 W3C 标准 NotificationOptions 字典 支持的任何内容都会被遵循

还不止这些 用于显示未读消息数的 App 徽章 往往与通知密切相关 因此声明式推送消息还支持 App 徽章的内置更新

看到浏览器现在能 自动显示这么多通知 无疑令人耳目一新 但有时你的需求更为具体 不能完全依赖浏览器来完成所有事情

我们通过 iOS 和 macOS 上的 原生推送学到了这一课 使用 UserNotifications 框架的 App 具备这种能力已经有一段时间 虽然这些推送消息 总是描述可见通知 但 App 可以选择将它优化 为更实用的内容

声明式网页推送也支持这项功能 采用的是 Service Worker 的 可选处理的形式 为什么这非常重要？ 当你对通知的准确性有极高标准时 这会很有用 例如 Browser Pets 服务器 可能会通知用户有 7 条未读信息 但却不知道用户 已经阅读了其中的 3 条 客户端设备上的 JavaScript 可以 更新通知以帮助用户

有时从数学角度来说 你无法包含通知文本 Browser Pets 的用户期望 在互相发送直接消息时 获得一流的端到端加密 而客户端设备上的密钥 是解码通知的唯一方法 我们来看看具体过程 这是典型的 Browser Pets 直接消息 的通知 JSON

JSON 包含已在发送方设备上 加密的数据 我们用户的设备拥有解密这些数据 的密钥 并且可以 使用可选的 Service Worker 来解密

JSON 还包括一个条目 指定“mutable”为 true 大多数声明式推送消息 是自动处理的 但这个条目告诉浏览器 这个通知 需要由 Service Worker 处理

这是 Browser Pets 用来处理 直接消息解密的 JavaScript

我们为 Service Worker 提供了一个推送事件处理程序 就像你对原始网页推送的 硬性要求一样

一个新的特性是 如果被派发的事件 源自指定为可变的推送 则事件现在有 声明式 JSON 提议的通知的副本

通过检查这个通知 我们可以判断它 应该是直接消息 并且我们可以访问加密数据

还记得我们的声明式网页推送 流程图吗？ 在验证通知后 浏览器查找 “mutable”条目

如果没有或者为 false 浏览器会自动显示通知

如果为 true 并且 Service Worker 显示替换通知 那么浏览器会使用替换通知 而不是推送消息中的 纯文本

因此 如果 Service Worker 成功解密了直接消息 并替换提议的通知 浏览器将显示这条解密消息

但如果它无法解密消息 并因此无法提供替换 则将使用原始的纯文本通知

声明式通知也将用于这样的情况 Service Worker 无法启动 原因可能是隐私功能已将它删除 或者设备 面临资源压力 声明式网页推送使用可选 Service Worker JavaScript 的方式 与原始网页推送需要 Service Worker 的方式完全相同 这引出了我最喜欢的部分 我们来了解一下向后兼容性

今天 大多数主流浏览器引擎 都支持原始网页推送 并且许多网站都在使用它 虽然广泛采用声明式网页推送 对每个人都更有好处 我们在确保你可以轻松采用它的同时 也保证你的通知 在所有浏览器中都能正常工作 对于已经在使用原始网页推送 并执行简单的 JSON 解析 来显示通知的人来说 我敢打赌 随着需求的增长 和参与程度的加深 你的推送消息的格式会逐块演变 这正是 Browser Pets 多年来的发展历程 当 WebKit 团队成功启用 声明式网页推送后 我们希望 Browser Pets 能够利用它 来提供尽可能高效 和可靠的通知 当然 推送必须能够继续 在所有浏览器中使用 我们来看看如何更新它

这个 Browser Pets 通知 JSON 随着时间推移自然增长

起初 它只包含通知的标题文本

最初 所有通知点按 都会打开主 Browser Pets App 后来我们添加了这个 clickURL 条目 来配置通知点按 跳转到的位置

后来 一些工程师认为 通知正文文本很重要

我个人将承担下一个变化的责任 这是我的主意 让通知在可能的情况下 播放系统警报声音

下一位工程师承认 我们基本上是使用 Web 标准 NotificationOptions 字典 来配置我们的通知 并决定将它显式地放入代码中 当然 他们没有回去更新以前的选项

这个临时的 JSON 格式包含构成对 showNotification 的 API 调用的 所有部分 只是名称和结构不同

重新组织它以匹配 声明式标准格式很简单

将每个属性重命名为 NotificationOptions 字典中的 标准名称也很容易

当我们添加了魔法键 来告诉浏览器这是 一条声明式推送消息后 我们就在支持它们的较新浏览器中 获得了自动通知！

回到那个临时 JSON 使用原始网页推送时 推送消息只是故事的一部分 你的 Service Worker 需要 对它做点什么 这是原始的 Browser Pets Service Worker 我们塞进 JSON 中的每个参数 都必须按名称提取 并且我们必须创建一个 NotificationOptions 字典 用于最终调用 showNotification

回忆一下声明式推送消息 是什么样子的

根据设计 声明式消息中 描述通知的关键成员 本身就是一个有效的 NotificationOptions 字典 因此 一旦我们将推送消息 重新格式化为有效的声明式 JSON 重写 Service Worker 来处理它就非常简单直接

我们从 JSON 中提取 “notification”成员 提取标题 并按原样将它们传递给 showNotification

在重构了推送消息 JSON 和 Service Worker 的 推送事件处理程序后 网页推送消息就能利用每个浏览器

支持声明式网页推送的浏览器 会可靠且高效地处理它们

尚不支持声明式网页推送的浏览器 则通过 你编写的 JavaScript 来处理它们 就像所有原始网页推送消息一样 我们对声明式网页推送感到兴奋不已 并希望它能为每个人服务 不妨试用一下 可以是 macOS 上的 Safari 浏览器 18.5 及更高版本 或 iOS 18.4 和 iPadOS 18.4 及 更新版中保存到主屏幕的网页版 App

如果你是首次在 App 中 支持网页推送 可以从一开始就选择声明式格式 如果你已经在使用网页推送 现在正是开始过渡的最佳时机 从本身就是声明式的旧版 Safari 浏览器推送通知格式迁移 更是前所未有的简单 在采用它时 请准备好 与这个讲座相关的资源 以便向 Web 标准社区 或 WebKit 项目提供反馈

你也可以观看这些讲座 详细了解我们的浏览器 通常如何支持网页推送 以及 Safari 浏览器和 WebKit 今年的新功能

感谢观看！