网页 App 中的新功能

♪ ♪

大家好 我是 Rachel 是 Safari 浏览器团队的工程师 今天 我很高兴与大家分享 网页 App 的新功能 自从第一款 iPhone 发布以来 我们一直在致力于 网页 App 的不断发展 网页 App 正变得越来越好 在 iOS 和 iPadOS 16.4 中 我们使用 Web Push 标准 和标记支持 来为主屏幕网页 App 添加了通知功能 我们为 iOS 和 iPadOS 浏览器添加 采用 Add to Home Screen 功能的 API

iOS 和 iPadOS 17 的 一个新功能是 现在在 Safari 浏览器视图控制器中 可以使用 Add to Home Screen 所以用户能在 iOS 浏览器和 App 内浏览器中添加主屏幕的网页 App macOS Sonoma 的一个新功能是 现在我们可在 Mac 使用网页 App Mac 的网页 App 让我能 专注在那些我经常使用的网站上 而把其他浏览内容分别开来 与 iOS 类似 创建网页 App 的方式 是将网站添加到程序坞中

我正在浏览维基百科 我想把它添加到程序坞中 我会打开文件菜单 然后选择 Add to Dock... 现在我可以看到这个网站的 图标、名称和 URL 我要把名字简化一下 如果我想的话 我还可以修改图标 但这个看起来很好 点击“Add” 现在我的程序坞中 就有了一个新图标 我将关闭 Safari 浏览器 并打开维基百科的网页 App

现在 只要我启动了 这个网页 App 我可以像使用 App 的方式 来访问该网站 我的账号仍然登录着 这是因为当网站被添加到程序坞时 Safari 浏览器会复制网站 Cookie 有一个带有导航按钮的 简化的工具栏 网站的主题颜色融入到工具栏中 作为开发者 你可以控制是否要显示导航按钮 今天 我们首先会介绍 Mac 网页 App 在所有网站上如何做到开箱即用 然后 我将告诉你如何自定义 你的网页 App 的行为 为用户创造最佳体验 最后 我将讨论通知 包括声音和标记 让你可以在用户没有使用 你的网页 App 时 也能向用户发送通知 让我们首先从网页 App 的 基本功能开始 开发者无需采用什么 Mac 网页 App 就能完美运行 任何网站都能成为网页 App Mac 网页 App 与许多功能完全集成在一起 这些功能和 macOS 原生 App 中集成的功能一样

让我们来看看我已经添加到 我的程序坞中的网页 App 这个网站没有任何 网页 App 的特有功能 比如网页 App 清单 它看起来很棒 并且作为 一个独立的网页 App 运行

与所有 Mac App 一样 网页 App 与台前调度、 调度中心和键盘快捷指令 (如 command + tab) 完美配合

可以从程序坞、启动台 和聚焦搜索打开网页 App

网页 App 可以使用 iCloud 钥匙串的自动填充凭证 以及采用了 Credential Provider Extension API 的 第三方 App 的凭证

我们让用户掌控自己的隐私 因此用户可以通过系统权限提示 和在系统设置的隐私与安全中 以与原生 App 相同的方式 授予你的网页 App 对摄像头、 麦克风和位置的访问权限 刚才谈到的是默认行为 但你可能希望为使用你的网站的用户 自定义体验 当一个网页被添加到 macOS 的程序坞中时 它会始终被视为一个网页 App 作为开发者 你可以控制网页 App 窗口的 工具栏的初始行为 默认行为是显示一个 带有导航控件的工具栏 这对在自身没有 导航控件的网站上进行导航 是很有帮助的

如果你的网站具有自己的导航控件 或在网站上下文中不需要导航控件 你可能就不希望显示工具栏 这称为独立显示模式

iOS 上的默认行为 与 macOS 的不同 已添加到主屏幕的网站 将在默认浏览器中打开 这为用户提供了一种从主屏幕 快速访问常用网站的方式 已添加到 iOS 和 iPadOS 的 主屏幕的网站采用独立显示模式 这将成为主屏幕网页 App 主屏幕网页 App 在 iOS 具有 独立的、类似 App 的体验 它的 Cookie 和存储容量 与浏览器的分别开来 它没有浏览器提供的 UI 比如工具栏 所有内容都来自网页 如果你希望你的网站能在 iOS 使用 Web Push 和标记 你就应该使用独立显示模式

要设置显示模式 我将在我的网站上 添加一个网页 App 清单 网页 App 清单是一种 网站与系统之间的通信方式 网站将与网页 App 相关功能的预期行为传达给系统 要将网页 App 清单 添加到你的网站上 只需在 HTML 的头部添加一个 具有 rel="manifest" 属性的链接 指向一个 JSON 文件 我将其命名为“manifest.json”

在对应的清单文件中 添加适用于你的网站的键和值 首先 我会设置名称 因为这是我希望 被用作于网页 App 的名称 而不是网站标题 因为我的标题相当长

为了更改显示模式 我会将显示 设置为“standalone” macOS 的 网页 App 就没有工具栏 在 iOS 和 iPadOS 上 网站就会在 主屏幕网页 App 中打开 而不是在默认浏览器中打开 现在 我们看看在网页 App 中 点击的链接将在哪里打开 所有网页 App 都有一个关联的范围 范围内的链接 将在网页 App 内打开 默认的范围是用于 创建网页 App 的网页域名 你可以使用网页 App 清单 进一步细化范围 将其限制为网站上的特定路径 例如 当我在 Browser Pets 网页 App 中点击这个链接 前往另一个页面“webkittens”时 你会注意到 我们仍然留在网页 App 中 因为 Web Kittens 只是 我们网站 example.com 下的另一个页面 而当我点击 一个指向 apple.com 的链接时 它将在我的默认浏览器中打开 因为它超出了 example.com 的范围 如果我希望 Web Kittens 的链接 像指向 apple.com 那样 在默认浏览器中打开 那么我可以通过调整 网页 App 清单的范围来实现

为了调整范围 我首先会 添加“start_url” start_url 是初次打开 网页 App 时加载的 URL 这将打开 Browser Pets 的首页 接下来 我会添加范围 假设我想将 Browser Pets 和 Web Kittens 分为不同的网页 App 那么我可以将范围限制在 Browser Pets 上 范围是清单 URL 的子目录 在这种情况下 范围将是 example.com/browserpets 范围内的任何链接 都将在网页 App 内打开 而范围之外的链接 将在默认浏览器中打开 在 iOS 的主屏幕网页 App 中 范围之外的链接将在 Safari 浏览器 视图控制器中打开

因此 当我在主屏幕 网页 App 中轻点这个链接时 它将在 Safari 浏览器 视图控制器中打开

我们需要登录 才能充分利用 我们日常使用的许多网站 像我之前提到的 为了让大多数用户 在使用网页 App 时能获得良好体验 在 Mac 上将网页 App 添加到程序坞时 我们会复制网站的 Cookie 在许多情况下 用户在打开 网页 App 时会保持登录状态 以获得无缝的体验 从那一刻起 Safari 浏览器和网页 App 之间的 Cookie 就分开了 如果你的网站的身份验证状态 仅存储在 Cookie 中 那么当用户将网页 App 添加到程序坞时 应该会自动登录到网页 App 因为 Safari 浏览器 会将网站的 Cookie 复制到网页 App 中 有些网站将身份验证状态分到 Cookie 和本地存储容量 由于本地存储容量在 创建网页 App 时不会被复制 用户将不得不重新进行身份验证 才能继续把你的网站 作为网页 App 使用 为了给用户创造流畅的体验 请将身份验证状态 保存在 Cookie 中

正如我之前提到的 超出网页 App 范围的链接 将在默认浏览器中打开 如果用户 在默认浏览器中登录你的网页 他们就不会在已经添加到 程序坞的网页 App 中登录 因为在添加网页 App 后 Cookie 和存储是分开的 通过第三方域名上的 OAuth 进行的身份验证 仍会在你的网页 App 中打开 这是通过启发式方法实现的 如果你测试并发现 你的 OAuth 流程在用户的 默认浏览器中打开身份验证体验 请通过 apple.com/feedback 向我们发送反馈 如果你希望确保你的 OAuth 流程 不在用户的默认浏览器中打开 你可以使用 window.open 通过 window.open 加载的链接 将始终在网页 App 中打开 不受范围限制 Apple 正与标准机构合作 为开发人员提供 一种指示身份验证域链接应留在 网页 App 上下文中的方法

有些网站使用电子邮件链接 用户通过打开链接来自动登录 由于来自电子邮件的链接 会在默认浏览器中打开 因此这不会自动将用户登录到 他们已经有的网页 App 中 你可以考虑在电子邮件中 提供一个一次性验证码 用户可以轻松地 在你网站的登录流程中输入 为了提供更方便 和更可靠的安全验证体验 可以考虑在你的网站上 采用通行密钥进行身份验证 请看 WWDC22 的 “通行密钥概览”了解更多信息 Mac 网页 App 中的通知 是一项令人兴奋的补充 加强了现有基于标准的 Web Push 对 macOS Ventura 中的 Safari 浏览器 和 iOS 16.4 的主屏幕网页 App 的支持 现在我将告诉你如何将通知 包括标记和声音 集成到你的网页 App 中 如果你已按照网页标准 实施了 Web Push 则推送通知应该可以 在你的网页上 作为 Mac 网页 App 正常工作 无需其他操作 Mac 网页 App 的通知 会用网页 App 图标进行显示

来自 Safari 浏览器的 Web Push 通知 显示 Safari 浏览器图标 而来自 Mac 网页 App 的通知 则使用网页 App 的图标 为用户提供上下文信息

当用户收到通知时 你可能希望在其设备上播放声音 引起他们的注意 现在我将告诉你这在 macOS、iOS 和 iPadOS 上如何实现 使用 Notification API 你可以指定通知是否具有声音 按照平台惯例 在 iOS 和 iPadOS 上 默认会播放声音 而在 macOS 上 默认不会播放声音 要覆盖平台默认设置 请明确指定静音值 如果通知应该静音 在请求通知时 将 silent 设置为 true 如果通知应该播放声音 将 silent 设置为 false 与原生 App 通知一样 用户可以使用通知设置 来控制通知声音

标记对于提醒用户在网页 App 中 有待处理的事项非常有用

就像 iOS 16.4 上的 主屏幕网页 App 一样 Mac 的网页 App 也支持标记 由于在 macOS、 iOS 和 iPadOS 上 标记和推送通知密切相关 当用户允许网页 App 发送通知 这也包括了允许 网页 App 使用标记的权限 标记能在网页 App 打开时 和在后台处理推送事件时进行更新 用户始终可以在设置中配置标记

有关采用 Badging API 的更多信息 请参阅 webkit.org 上的 “主屏幕网页 App 的标识”

有关采用基于标准的 Web Push 的更多信息 请看 WWDC22 上的 “认识 Safari 浏览器的 Web Push”

在 iOS 的主屏幕网页 App 和 macOS 上的网页 App 与专注模式集成 使用户可以对通知进行控制 用户可以设置 在不同的专注模式下想看到的通知 并将其偏好应用于 所有设备上的专注模式 让我们回头看看 我们的网页 App 清单 “id”清单键定义了 同一域名中唯一的网页 App 这用于同步专注模式 并且如果你的网站中有多个部分 应被视为同一域名下的 不同网页 App 这将非常有用 如果在一个给定域下 只有一个网页 App 则不需要设置 id 如果未提供 id 则回退到 start_url 专注模式最棒的一部分就在于 专注模式在用户的所有设备上同步

开发者和用户都可以控制 专注模式设置的同步方式 作为开发者 你可以为你网站的 不同部分创建独立的网页 App 例如 你可为商店创建一个网页 App 为论坛创建一个网页 App 这里 “Name”列是用户的 iPhone 或 Mac 网页 App 名称 网页 App 清单中的 id 键可用于指示 id 为“shop”的网页 App 是为你的商店而设计的 而 id 为“forums” 的网页 App 是为你的社区论坛而设计的 这样 用户可以为 你的商店和论坛网页 App 设置不同的通知偏好 当名称和 id 一致时 专注模式在用户设备之间同步 用户可以在设备上创建一个网站的 多个网页 App 实例 这有助于区分工作和个人帐户 用户可以为每个实例选择不同名称 在此示例中 是“Forums”和“Forums - Work” 这样 用户可以 为每个论坛网页 App 设置不同的通知和专注设置 并在用户的所有设备上同步

今年我们在 WebKit 中 添加了几个对你创建网站 可能有帮助的 API

我们为 User Activation API 提供了支持 可以告知网站 何时发生了瞬时或粘性用户激活 这可以帮助你确定是否可以 调用依赖于用户激活的函数 例如请求发送通知的权限 在 macOS 和 iPadOS Safari 16.4 中我们发布了 更新和取消前缀的 Fullscreen API 我们还添加了 对 Screen Orienta API 的初步支持 包括 type 和 angle 属性 以及 onChange 事件处理程序

想了解更多信息 请参阅 webkit.org 上的 “Safari 16.4 中的 WebKit 功能” Mac 网页 App 可 直接在所有网站上做到开箱即用 你可以使用 网页 App 清单自定义 将你的网站添加到程序坞时的行为 你可以实现 针对网页 App 定制的功能 例如 Web Push 和标记 有关在 Safari 浏览器中 开发和调试你的网站的更多信息 请观看 WWDC23 中的 “重新发现 Safari 浏览器的开发者功能” 和“网页检查器的新内容” 感谢你的观看 好好享受 WWDC23 ♪ ♪