Safari 浏览器网页推送功能简介

利用“网页推送”，在 macOS 的 Safari 浏览器中优化您的网站和网页版 App 的通知功能。我们将说明如何通过基于网页标准的 Push API、Notifications API 和服务工作线程组合向用户发送通知。

资源

相关视频

WWDC23

网页 App 中的新功能

WWDC22

Safari 浏览器和 WebKit 的新功能

下载

♪ ♪

Brady Eidson: 大家好我叫 Brady Eidson 是 WebKit 架构团队的工程师我很高兴向您介绍 Safari 浏览器中的网页推送功能网页推送可以让您给您的网络 App 用户发送远程通知这里在屏幕的右上角是来自 webkit.org 的通知显示点击通知打开新窗口中的 WebKit 博客文章在我讲述它的工作原理的其它细节之前我想回答几个很多开发者想问的问题

从 macOS Ventura 开始 Mac Safari 浏览器开始支持网页推送明年 iOS 和 iPadOS 也会安装网页推送

Apple 的 Safari 浏览器推送通知很久以前就向接触 Mac Safari 浏览器用户提供了如今它还在继续起作用我很高兴地宣布我们增加了对网页推送的支持这是真正的网页推送各种网络标准的相同组合也在其它浏览器中使用我们稍后将讨论这些标准但是最重要的是如果您对您的网络标准 App 进行过编码就无需在 Safari 浏览器中对它做任何改变当然如果您不用 Safari 浏览器进行浏览器检测的话那么您还要做一些其它的工作现在是浏览器检测到功能检测的最佳时间功能检测一直是最佳实践我们使用的是相同的 Apple 推送通知服务在所有 Mac 和 iOS 设备上为本地推送提供动力但没有 Apple Developer 帐户需要访问 Safari 浏览器用户我们正在使用新的网页推送的端点 URL 它带出另一件事可能在无意中排除了 Safari 浏览器如果您在服务器上严密管理推送端点请确保您允许 URL 来自 push.apple.com 的任何子域对于那些重要的问题让我们不但来解答更要详细地谈一下首先我们从用户的角度来看一下 Safari 浏览器中的网页推送体验然后我们将介绍整个网页推送流程从请求许可到在通知中心处理进入许可的点击最后我们来看一看从网页推送到现有的网络 App 需要添加什么但首先我们来看一下 Mac Safari 浏览器用户体验现场演示一下将是最好的介绍方法这是 macOS Ventura 上的 Safari 浏览器在这个浏览器选项卡中我打开了 webkit.org 我需要用 WebKit 开源项目保持更新网页推送是一个很好的方法如果没有用户请求手势是不允许使用 webkit.org 请求推送权限的所以我会在这里点击这个钟形按钮订阅通知您在这里看到的是系统通知提示这与其它 App 是一样的在这种情况下它代表 webkit.org 我将单击 allow 一切就绪 webkit.org 给了我选择收到有关新博客文章的通知以及对源代码存储库的新的承诺我知道每次提交都会收到通知会分散我对重要工作的注意力但我真的想收到有关新的博客文章的消息所以我现在要检查那个框巧合的是一定有人刚刚发布了关于网络推送的 WebKit 博客文章此通知看起来和任何其它的一样是由 webkit.org 推送的我可以点击它来激活还有博客文章要在 Safari 浏览器中打开一旦用户授予网站权限他们就控制了该许可作为一个 macOS 用户我习惯了在系统设置里面管理通知首选项那里就是我可以配置 webkit.org 的通知的地方同样丰富的配置正如我在任何其他 App 或服务中所发现的那样作为 Safari 浏览器用户我习惯于从 Safari 浏览器偏好设置中管理网站设置我也可以去那里打开或关闭 webkit.org 的权限这就是网页推送的工作原理适用于 Mac Safari 浏览器中的用户在我们继续之前我想重新回复一下该演示中涵盖的一些内容首先我们不希望用户被没有订阅的垃圾邮件所打扰所以一个网站只有在请求的时候通过点击鼠标或键盘才会推送订阅一旦网站获得许可向用户显示通知用户就会控制该权限他们可以选择在 Safari 浏览器的首选项或系统设置中对它进行管理如果他们恰巧在两者中都对它进行管理设置将保持同步最后如果您针对不同类型的事件提供通知最好的做法是针对通知类型在您的网络 App 中提供精细化控制就像其他 App 一样现在您已经看到了网页推送的实际应用让我们深入了解一下每一步正在发生什么部分开发者已经对此非常熟悉但是对于那些刚接触网页推送的人来说我必须一步一步来向您推荐相关标准和过程中的文档首先是用户在浏览器选项卡中访问您的网站这是在 Safari 浏览器中打开的 webkit.org 由于它是在选项卡中打开的它可以安装一个 Service Worker Service Worker 是一个在整个域中运行的 JavaScript 单元是从当前打开的浏览器选项卡一旦 Service Worker 脚本已安装您的网络 App 就符合了请求推送订阅的条件如前所述此请求必须与用户手势相关联当点击这个钟形按钮时 webkit.org 请求就会得到许可这满足了用户手势要求当您的网站请求推送订阅时用户就会看到此系统提示这是他们可以进行关于授予您的网站这种强大能力的最终通话的地方

用户可能会拒绝该请求您的 JavaScript 应该准备对它进行处理但假设用户授予了权限您的 JavaScript 就会回复一个 PushSubscription 对象里面有您的服务器给这个浏览器的用户发送推送消息时所需的一切像这样的信息要使用确切的 URL 端点您可以以任何适合您的网络 App 的方式将 PushSubscription 的有效载荷返回您的服务器许多流行的服务器包都有网页推送支持管理订阅或者您可以自已翻阅在实际当中这同样适用于如何以及何时发送推送消息到您的服务器知道的 URL 端点我不能告诉您什么时候这样做这取决于您和您的网站但是一旦您决定发送该推送消息我可以在接下来发生的事情中为您提供帮助还记得推送请求是如何安装到 Service Worker 的吗一旦您的服务器发送了推送消息 Safari 浏览器便会接收到它就会唤醒您的 Service Worker 并向其发送一个 JavaScript 推送事件在通知中心向用户显示通知是处理推送事件时的要求如果您的网站当时在浏览器选项卡中处于打开状态网站就会接收推送事件并显示通知发生如果您的网站当前未在浏览器选项卡中打开这种情况也会发生对于 macOS Ventura 上的 Safari 浏览器即使 Safari 浏览器当前未运行也会发生这种情况最后一步如果您的用户点击了那个通知一个通知点击事件就会被发送到您的 Service Worker 这样它就会适时响应例如通过打开一个新窗口让 URL 与该通知相关联我们带您了解了网页推送流程现在要通过向现有的网络 App 实际添加网页推送支持来了解更多细节除了 webkit.org Browser Pet 对于 Safari 浏览器和 WebKit 团队来说是最关键任务的内部工具让部门每个人对他们最喜欢的 WebKitten 和 Pup 在 Safari 浏览器保持更新一直是 Browser Pet 的使命而网页推送让这比以往更加容易我们内部的 BrowserPet 域已经有一个 ServiceWorker 脚本被注册以加快页面加载并在多个选项卡之间同步概括地说 ServiceWorker 脚本和这有很大的相似之处当工程师访问选项卡中的 Browser Pet 页面时这个 JavaScript 摘录将确定 Service Worker 脚本是否已经注册或在必要时注册注意前面提到我们在这里练习的功能检测是最佳实践使用 Service Worker 先决条件已搞定我们准备好订阅推送了请记住没有明确的用户手势您不能要求推送订阅运行此脚本作为按钮的 onclick 处理程序的响应是满足该要求的多种方式之一用户点击该按钮之后这里就有了推送订阅的请求代码我将对这几点进行更深层次的探讨首先我们需要配置推送订阅请求重要的一点是在我们的服务器上使用公钥到 Apple 推送服务器上识别自已这里我们使用的标准技术叫做 VAPID 和其他浏览器一样有时候我们不会再在这里重复 VAPID 的细节但是网上有资源来帮助您在您的的服务器设置中使用最好的解决方案有了 VAPID 密钥集我们就准备好配置订阅请求了请注意我们明确说明我们承诺永远使推送用户可见当 JavaScript Push API 标准选择在 JavaScript 运行时对推送不予回应是大多数浏览器所不予支持的 Safari 浏览器不支持这种情况和大多数网站一样 Browser Pet 不需要这种情况然后我们请求推送权限对于权限提示中的这行 JavaScript 结果用户可以选择批准或拒绝假设用户授予权限为了 Browser Pet 所有 Safari 浏览器团队成员都会这样做这会给我们一个 PushSubscription 对象它详细说明了如何在用户们的浏览器中接触到他们 URL 端点以及密钥等可用于把中转的推送消息加密最后我们需要把所有这些细节发送到我们的服务器上正如先前所说基于您的具体应用具体情况会有所不同我们的 BrowserPet 服务器使用 WordPress 已经有一些插件用于支持标准网页推送很可能您在后端会发现同样的情况而且网上有资源能帮助找到几乎任何设置的正确解决方案现在我们需要回到我们的 Service Worker JavaScript 代码它需要处理一些从推送事件开始的新事件当推送消息从 Browser Pet 服务器换到这个浏览器时这个 Service Worker 就会收到一个推送事件这个引用名包含 PushMessageData 对象获取您的服务器发送的数据有多种方式我们在这里使用 JSON 访问器记住当我们订阅推送时我们承诺的 JavaScript 始终是用户可见的吗这意味着我们在响应每次推送时必须始终显示为平台本机通知最好在您的推送事件处理中尽早执行此操作我们正全力从那个 JSON blob 中配置通知包括使用 URL 设置操作这很快就会派上用场显示通知后我们需要让用户点击它我们的 Service Worker 脚本还有一个事件要处理在这个 notificationclick 处理程序中 BrowserPet 将从被点击的通知中获取 URL 以打开一个新窗口注意这是一种非常常见的模式这是所有我们需要写入的 JavaScript 我们需要用它来支持网页推送当然最好是在开发过程中获得一些帮助和往常一样这是 Web Inspector 的用武之地除了帮助您的网站在浏览器选项卡中打开 Web Inspector 还可以检查 Service Worker 实例并在事件处理程序上设置断点这一切会让您检查和调试订阅推送的 JavaScript 以及处理推送事件和通知事件的服务人员代码此外 Apple 推送通知服务器在您试图发布推送消息的时候如果出现了问题那么就会出现一些人类可读性错误查看与这次讲座相关的更多链接以获取更多资料在编写该代码时我想就用户隐私和电源使用提出的几点进行更详细的讲解重要的是我不是第一次这么说了订阅推送需要用户手势与其他网络平台的特权功能一样对于用户来说在实际当中要求用户在启用网页推送时先回答问题是正确的选择正如我向您展示代码时所提到的关于如何请求推送订阅一样您必须保证推送的内容是用户可见的处理推送事件对您的 JavaScript 来说并不是让您获得静默后台运行这样做会破坏用户的信任和用户的电池寿命事实上在处理推送事件时您必须向通知中心发送通知其它浏览器都有用以确保推送用户可见的反对违反承诺对策 Safari 浏览器也是如此在 macOS Ventura 的 Beta 版本中在三个推送事件之后您未能及时发布通知您网站的推送订阅将被撤销您将需要通过再次访问权限的工作流程就是这样我们为支持网页推送感到由衷的自豪并且很高兴任何网站都可以使用它无需 Apple 开发者帐户只要您按照标准编码并使用功能检测您就不会在不知不觉中排除 Safari 浏览器您的用户就会在 macOS Ventura 上的 Safari 16 中获得网页推送的好处和往常一样今年我们已经为 Safari 浏览器和 WebKit 添加了很多其它的新功能我希望您能看一看那个讲座并了解更多感谢收看祝您余下的 WWDC 2022 之旅一切顺利

8:27 - BrowserPetsWorker.js

// BrowserPetsWorker.js

function handleMessageEvent(event) {
    // ...
};
self.addEventListener('message', (event) => {
    handleMessageEvent(event);
});

function primeCaches() {
    // ...
};
self.addEventListener('install', (event) => {
    primeCaches();
});

self.addEventListener('fetch', (event) => {
    event.respondWith(caches.match(event.request));
});

8:42 - BrowserPetsMain.js

// BrowserPetsMain.js

var registration;
if ('serviceWorker' in navigator) {
    let registration = await navigator.serviceWorker.getRegistration();
    if (!registration)
        registration = await navigator.serviceWorker.register('BrowserPetsWorker.js');
}

9:00 - BrowserPetsMain.js subscribeToPush()

// BrowserPetsMain.js

async function subscribeToPush() {
    // ...
}

// BrowserPetsMain.html

<button onclick="subscribeToPush()">Register for Updates</button>

9:19 - BrowserPetsMain.js subscribe

// BrowserPetsMain.js

async function subscribeToPush() {
    let serverPublicKey = VAPID_PUBLIC_KEY; 

    let subscriptionOptions = {
        userVisibleOnly: true,
        applicationServerKey: serverPublicKey
    };

    let subscription = await swRegistration.pushManager.subscribe(subscriptionOptions);

    sendSubcriptionToServer(subscription);
}

9:36 - BrowserPetsMain.js subscriptionOptions

// BrowserPetsMain.js

async function subscribeToPush() {
    let serverPublicKey = VAPID_PUBLIC_KEY; 

    let subscriptionOptions = {
        userVisibleOnly: true,
        applicationServerKey: serverPublicKey
    };

    let subscription = await swRegistration.pushManager.subscribe(subscriptionOptions);

    sendSubcriptionToServer(subscription);
}

10:21 - BrowserPetsMain.js request permission to push

// BrowserPetsMain.js

async function subscribeToPush() {
    let serverPublicKey = VAPID_PUBLIC_KEY; 

    let subscriptionOptions = {
        userVisibleOnly: true,
        applicationServerKey: serverPublicKey
    };

    let subscription = await swRegistration.pushManager.subscribe(subscriptionOptions);

    sendSubcriptionToServer(subscription);
}

11:13 - BrowserPetsWorker.js push

// BrowserPetsWorker.js

self.addEventListener('push', (event) => {
    let pushMessageJSON = event.data.json();

    // Our server puts everything needed to show the notification
    // in our JSON data.
    event.waitUntil(self.registration.showNotification(pushMessageJSON.title, {
        body: pushMessageJSON.body,
        tag: pushMessageJSON.tag,
        actions: [{
            action: pushMessageJSON.actionURL,
            title: pushMessageJSON.actionTitle,
        }]
    }));
}

12:06 - BrowserPetsWorker.js notification click

// BrowserPetsWorker.js

self.addEventListener('notificationclick', async function(event) {
    if (!event.action)
        return;

    // This always opens a new browser tab,
    // even if the URL happens to already be open in a tab.
    clients.openWindow(event.action);
});

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。