iOS 和 iPadOS 上网页应用的 Web Push

今天标志着 iOS 和 iPadOS 16.4 beta 1 的发布,同时带来了对 Web Push 和主屏幕网页应用其他功能的支持。

iPhone Lock Screen showing a notification arriving

今天也发布了 Safari 16.4 的首个测试版。这是一个重要的版本,WebKit 中包含了超过 135 项功能——包括 RegExp 后向断言、导入映射 (Import Maps)、OffscreenCanvas、媒体查询范围语法、@propertyfont-size-adjust、声明式 Shadow DOM 等等。我们将在 Safari 16.4 发布时撰文详细介绍这些新的 WebKit 功能。同时,您可以在Safari 16.4 发布说明中阅读新功能和修复的完整列表。

但让我们暂时放下 Safari,谈谈 iOS 和 iPadOS 上的主屏幕网页应用。

从第一代 iPhone 开始,用户就可以将任何网站添加到他们的主屏幕——无论是宣传册网站、博客、新闻网站、在线商店、社交媒体平台、流媒体视频网站、生产力软件、艺术创作应用程序,还是其他任何类型的网站。在过去的十年里,iOS 和 iPadOS 上的 Safari 用户可以通过轻点“共享”按钮打开共享菜单,然后轻点“添加到主屏幕”来完成此操作。该网站的图标随后会出现在他们的主屏幕上,快速轻点即可返回该网站。

Web 开发者可以选择创建一个清单文件(将其display成员设置为standalonefullscreen),并随其网站一同提供。如果这样做,该网站就会成为一个主屏幕网页应用。然后,当您轻点其图标时,该网页应用将像 iOS 或 iPadOS 上的任何其他应用一样打开,而不是在浏览器中打开。您可以在应用切换器中看到它的应用预览,与 Safari 或任何其他浏览器分离。

添加到主屏幕的网页应用的 Web Push

现在,在 iOS 和 iPadOS 16.4 中,我们为添加到主屏幕的网页应用增加了 Web Push 支持。Web Push 使得 Web 开发者可以通过共同使用Push APINotifications APIService Workers向用户发送推送通知。

已添加到主屏幕的网页应用可以请求接收推送通知的权限,只要该请求是对直接用户交互的响应——例如轻点网页应用提供的“订阅”按钮。iOS 或 iPadOS 将随后提示用户授予网页应用发送通知的权限。一旦允许,用户可以在通知设置中按网页应用管理这些权限——就像 iPhone 和 iPad 上的任何其他应用一样。

来自网页应用的通知与来自其他应用的通知完全相同。它们显示在锁定屏幕、通知中心和配对的 Apple Watch 上。

这与去年秋天在 Safari 16.1 中为 macOS Ventura 添加的基于 W3C 标准的 Web Push 相同。如果您已经为您的网页应用实现了基于标准的 Web Push,并遵循行业最佳实践——例如使用特性检测而不是浏览器检测——它将自动在 iPhone 和 iPad 上工作。

iOS 和 iPadOS 上的 Web Push 使用与驱动所有 Apple 设备上的原生推送相同的 Apple 推送通知服务。您无需成为 Apple 开发者计划的成员即可使用它。如果您控制着自己的服务器推送端点,请务必允许来自*.push.apple.com的 URL。

要了解有关如何设置 Web Push 的更多信息,请阅读 webkit.org 上的文章了解 Web Push,或观看 WWDC22 会议视频了解 Web Push

专注模式支持

通知是一个强大的工具,但人们很容易陷入被太多通知淹没的境地。iPhone 和 iPad 上主屏幕网页应用的通知与专注模式集成,允许用户精确配置何时何地接收它们。对于在多个 iOS 或 iPadOS 设备上将同一网页应用添加到主屏幕的用户,专注模式会自动应用于所有设备。

Badging API

iOS 和 iPadOS 16.4 上的主屏幕网页应用现在支持Badging API。就像 iOS 和 iPadOS 上的任何应用一样,网页应用现在能够设置其徽章计数。无论是用户在前台打开网页应用,还是网页应用在后台处理推送事件——即使尚未授予显示计数的权限——setAppBadgeclearAppBadge都会更改计数。

在应用图标上显示徽章的权限授予方式与 iOS 和 iPadOS 上的其他应用完全相同。一旦用户授予允许通知的权限,主屏幕上的图标将立即显示当前的徽章计数。然后,用户可以在通知设置中配置徽章权限,就像 iOS 或 iPadOS 上的任何其他应用一样。

清单 ID

适用于 iOS 和 iPadOS 16.4 的 WebKit 添加了对 Web Application Manifest 标准中id成员的支持。它是一个字符串(以 URL 形式),作为网页应用的唯一标识符,旨在供操作系统以所需方式使用。iOS 和 iPadOS 使用清单 ID 来同步多个设备之间的专注模式设置。

iOS 从一开始就支持同一网页应用的多重安装。我们相信人们能够在他们的设备上多次安装任何网页应用可能很有用——提供额外的灵活性来支持多个账户、区分工作与个人用途等等。

将网页应用添加到主屏幕时,用户有机会更改应用的名称。iOS 和 iPadOS 16.4 将此名称与清单 ID 结合起来,以唯一标识网页应用。这样,用户可以在一台设备上安装同一网页应用的多个副本并赋予它们不同的身份。例如,来自“Shiny(个人)”的通知可以被专注模式静音,而来自“Shiny(工作)”的通知则可以被允许。如果用户在多个设备上为他们最喜欢的网站指定相同的名称,则一个设备上的专注模式设置将同步并应用于其他设备。

第三方浏览器支持“添加到主屏幕”

在 iOS 和 iPadOS 16.4 中,第三方浏览器现在可以为用户提供从共享菜单将网站和网页应用添加到主屏幕的功能。

iOS 和 iPadOS 上的应用程序通过创建包含activityItems数组的UIActivityViewController来显示共享菜单。“添加到主屏幕”要包含在共享菜单中,必须满足以下条件:

  1. 应用程序拥有com.apple.developer.web-browser托管权限
  2. activityItems数组中包含一个 WKWebView
  3. WKWebView 显示的是一个带有 HTTP 或 HTTPS URL 的文档
  4. 如果设备是 iPad,则不得配置为共享 iPad

如上所述,用户添加到主屏幕后,任何清单文件中将display成员设置为standalonefullscreen的网站,在用户轻点其图标时都将作为网页应用打开。无论是由哪个浏览器将网站添加到主屏幕,都是如此。

如果没有配置请求网页应用行为的清单文件(并且没有标记网站具有网页应用能力的meta标签),那么该网站将作为主屏幕书签保存。从 iOS 和 iPadOS 16.4 开始,主屏幕书签现在将在用户当前的默认浏览器中打开。

新的回退图标

Web 开发者通常会提供图标来代表他们的网站在浏览器的界面中。如果未提供主屏幕图标,以前 iOS 和 iPadOS 会从网站的屏幕截图创建图标。现在,iOS 和 iPadOS 16.4 将使用网站名称的首字母以及网站中的颜色来创建和显示一个会标图标。

要为您的网站或网页应用提供使用的图标,请在清单文件中列出图标——这项功能自 iOS 和 iPadOS 15.4起就已支持。或者您可以使用长期支持的技术,在 HTML 文档的head中列出apple-touch-icons。(如果您同时使用两者,apple-touch-icon将优先于清单中声明的图标。)

适用于网页应用的新 Web API

除了 Web Push、Badging API 和 Manifest ID,iOS 和 iPadOS 16.4 中 Webkit 的许多其他新功能对于专注于主屏幕网页应用的 Web 应用开发者来说特别有意义。这些功能包括:

有关功能的完整列表,请参阅Safari 16.4的发布说明。

反馈

您是否发现了 bug?这在 beta 版本中是预料之中的。请通过从您的 iPhone 或 iPad 提供反馈来帮助我们在 iOS 和 iPadOS 16.4 公开发布之前消除这些 bug。反馈助手将收集所需的所有信息,以帮助我们了解发生了什么。

此外,我们很高兴收到您的来信。您可以在 Mastodon 上找到我们:@jensimmons@front-end.social@bradeeoh@mastodon.social@jondavis@mastodon.social。或者发送推文到 @webkit 来分享您对这些新功能的看法。