认识面向空间计算的 Safari 浏览器

♪ 悦耳的器乐嘻哈 ♪ ♪ Etienne Segonzac：大家好！ 欢迎来到本次讲座 我是 Safari 浏览器团队的 工程师 Etienne Segonzac 和我一起的还有 我的同事 Tim Horton 我们将为你介绍 面向空间计算的 全新 Safari 浏览器 我们不是每年都能把网络技术 带到一个全新的平台上 所以这次讲座对我们来说意义重大 我们尽可能打造了最棒的浏览器 让网络体验在这个新设备上大放异彩 那么让我们来看一看 Safari 浏览器的实际操作 Tim Horton：谢谢 Etienne 那我们开始吧 第一次在 xrOS 上 打开 Safari 浏览器时 你就会发现它看起来很熟悉 就像常用的 iPad 和 Mac 版 Safari 浏览器一样 但这些相似之处不止是表面上的 这个 Safari 浏览器 基于相同的 WebKit 引擎 我们还针对此平台 对其进行了一些功能上的补充 所有网站都能开箱即用并且完美运行 这正得益于Safari 浏览器 对 Web 标准的广泛支持 浏览网页十分轻松 要点击链接 用户 只需伸出手触摸页面 或者看向链接并轻捏手指 当用户看向某个链接时 Safari 浏览器会 轻柔地高亮显示它 以帮助用户确认正在浏览的内容 使用 Safari 浏览器时 你很快就会发现 它是如何充分利用 此平台的强大功能 例如 我们对标签页概览 进行了完全重新设计 以适应宽大的显示屏 使切换标签页 变得比以往更加有趣

平台对多窗口的支持 让你可以前所未有的方式 进行多任务处理 你可以随心所欲地摆放 网页和 App 让它们环绕在身边 我特别喜欢将它和 Mac Virtual Display 一起使用 以获得终极的网络开发体验 将最爱的网络视频用全屏显示 则会让它成为真正的焦点 ♪ 悦耳的器乐嘻哈 ♪ 大家好 我是 Kendall Bagley Safari 浏览器团队的 一名软件工程师 虽然我们已经 将你所熟悉的网络体验带到了这个平台 但我们仍然建议你 掌握我们推荐的最佳实践 那么接下来让 Etienne 为我们来介绍 Etienne：谢谢 Tim 我真的超爱刚刚的标签页概览 最棒的是 所有这些网站 都是开箱即用的 多亏了响应式设计 它们都可以适应各种情况 不管是我们手掌大小的 iPhone 还是填满整个房间的屏幕 你在之前使用的 逐步增强网站的技术 仍然适用于此平台 你应该用 CSS 视口单位来设计布局 并用媒体和包装器查询 来对窗口大小调整做出反应 对于图形 最好使用 SVG 特别是用于 UI 元素 这将确保最佳的渲染效果 即使是在网页离得很近时也是如此 必须使用位图资源时 devicePixelRatio 和响应图像 将反映出图像加载 和画布渲染的推荐分辨率 今天我们将学习对这个新体验 至关重要的自然交互 了解如何针对 这个平台优化我们的网站 探索整合网络上 3D 内容的 独特机遇 让我们深入挖掘一下 直接和间接手势 我们在这个设备上的主要输入模式 是由眼手共同融合驱动的 就像大家在 Tim 的演示中看到的 操作十分自然 用户只需随意看看 轻敲或者捏合手指 当用户轻捏手指时 他们的眼睛可以 查找 HTML 目标 并为 pointerdown 事件提供坐标 在这个手势操作期间的 pointermove 事件 将会跟随用户的手部动作 并将在释放时 派发一个 pointerup 事件 用户也可以伸出食指 直接触摸页面 当手指与窗口相交时 会仅根据手指位置 派发一个 pointerup 事件 pointermove 事件会像 之前一样跟随动作 并在用户的手指 不再与窗口相交时 派发 pointerup 事件 当然 对于简单的交互 你不需要担心底层的指针事件 Safari 浏览器仍然可以 触发点击事件 并且滚动和滚动捕捉也正常工作 当涉及到媒体查询时 这种基础的输入模式 就相当于使用触摸屏 指针是不精确的 而且不支持悬停 但是请记住 可以通过蓝牙 来连接触控板或者键盘 你可能会好奇为什么在浏览页面时 悬停样式不会被触发 这是因为这个设备用一种新方式 来提供视觉反馈 当用户查看某个元素时 它会在用户点击之前 突出显示该元素 因此 不论是你的网站 还是 Safari 浏览器本身 都不需要知道用户在看哪里 这个系统基于我们所说的交互区域 它们是由 Safari 浏览器 的 WebKit 引擎 根据你的可访问标记和 CSS 样式自动生成的 按钮、链接、菜单 或具有相应 ARIA 角色的元素 将会自动突出显示 对于输入字段和表单元素也是如此 即使它们具有自定义样式 但是 如果想表明 某样东西是可交互的 请确保对其他 HTML 元素 使用 cursor: pointer 下面让我来演示一下 在这里 我正在构建 一个文件列表 UI 并且有一个用于列表中 项目的自定义元素 我将添加 cursor: pointer 以使它们可以突出显示 但是这个自定义元素 内部使用的是 div cursor 属性是继承的 所以图标和标签会得到各自的区域 并分别高亮显示 对这些内部 div 设置 pointer-events: none 可以避免混淆 WebKit 会知道 它们不需要单独突出显示 而且这也将简化事件处理代码 因为我将始终获得相同的事件目标 我还可以通过使用 CSS border-radius 属性 来塑造突出显示的形状 例如为元素的每个角 或者部分角添加半径 我甚至可以制作一个完美的圆形 但重要的是让 所有元素的视觉风格一致 嘿 Tim 还记得 我们正在开发的网站吗？ 或许我们可以细化上面的交互区域 Tim：好啊 让我们 来看看它们现在的样子

即使没有设备 你也可以使用 xrOS 模拟器 来调试高亮区域 在窗口内四处移动光标可以 模拟用户正在看的位置 点击鼠标则模拟轻捏手指 让我们在模拟器中打开 Safari 浏览器 看看我可以 怎么做来美化 我网站上的突出显示部分 当我在看这个页面时 我注意到的第一件事是 导航栏中的按钮 根本没有突出显示 大家可能还记得 Etienne 提到过 Safari 浏览器使用 CSS 属性 cursor 来确定元素是否会被视为交互式 而我碰巧知道这些按钮 在 macOS Safari 浏览器中 也没有手形光标 所以我预感这可能是问题所在 但我们也可以在 Web Inspector 中检查 如果想进一步了解相关信息 大家可以观看讲座 “重新认识 Safari 浏览器的 开发者功能” 在 Web Inspector 中 我发现了这个错误的全局光标样式 让我们删除它 并让链接 变成默认的 cursor: pointer 样式

太棒了！ 现在我们有突出显示了 但是似乎有点错位 实际上 它揭示了我的网站 中的一个错误 即使在 macOS 上 实际上也只有文本是可交互的 如果我尝试单击按钮本身 链接不起效 那么我们在网站上发现了一个错误 修复它之后 我们还可以改善网站 在这个平台上的外观 真是一举多得 现在我要把整个按钮 变为链接的一部分 而不是只有文字

让我们看看这样成功了没有

看起来好多了！ 现在整个按钮都变得可交互了 高亮也覆盖了整个区域 但是仔细看一下 我们会发现 高亮的角落并不完全对齐 Safari 浏览器的高亮部分 默认有一个非常小的圆角 但是如果交互元素有边框半径 我们也需要考虑到这一点 让我们来调整一下

只需要把相同的边框半径 加到交互元素中即可

太好了！ 现在按钮的高亮 正是我们想要的样子 让我们点击一个按钮

哦 这个评分的动画效果 跟在 iPad 上比有点快了 我想我们还有一些需要调整的东西 但是我们之后再继续 现在让 Etienne 来讲一讲 你可以对自己的网站进行哪些优化 Etienne：谢谢 Tim 我们为这个平台优化网站时 确实必须牢记一些事项 我们最初推出视网膜显示屏时 像素的概念变得更加抽象了 作为网页开发者和设计师 我们使用 CSS 像素 并让用户代理根据需要 使用尽可能多的设备像素 来适应硬件 但今天 屏幕的概念 变得更加抽象了 当使用全屏模式时 其目标是专注于单一的元素 页面的其他部分会逐渐消失 同时 窗口会被调整为默认大小 这个默认的尺寸也会作为屏幕尺寸 反馈给 JavaScript 因此在全屏模式下 期望窗口和屏幕大小匹配的网站 将会继续工作 但请记住 全屏窗口 在这个平台上是可以调整大小的 而且它们甚至可以 比反馈的屏幕尺寸更大 在滚动和动画方面 一如既往 性能至关重要 尤其是在这款设备上 每个动画 都将以尽可能最佳的帧速率为目标 被动滚动事件监听器将防止你的动画 干扰滚动 当使用 requestAnimationFrame 时 一定要测量每一帧之间的时间 Web Inspector Timelines 也可以帮助你识别任何性能问题 你可以在 Web Inspector 技术讲座中 进一步了解有关信息

说到 requestAnimationFrame 我这里的动画有点卡顿 它的运行时间取决于 我们调用 animate() 的频率 而这个频率可能会更高或更低 具体取决于设备的情况 我应该做的是测量 每次更新之间的时间 并用它来计算动画的进度 这个步骤很简单 而且能让我的动画 独立于 requestAnimationFrame 的刷新率 我想这就是评分的动画存在的问题 Tim：哦没错 我已经调整好了 让我们看看它在设备上运行 得怎么样

看起来好多了 现在它可以适应将来 任何帧速率的设备 无论是慢的还是快的 这些茶具在网站上看起来都很不错 但我们还能更进一步 如果想展示它们 在桌子上的真实样子 可以轻松地利用快速查看 调整网页 让这变为现实 与 iOS 上的 AR 快速查看 完全一样 你只需在图像周围添加一个 引用 USDZ 文件的锚点 即可将简单的图像 变成神奇的快速查看体验 太棒了！现在我真的可以判断出 哪个合适了 Etienne 你会选哪个茶具？ Etienne：我想我得在我的厨房里 试一试 才能知道哪个最合适 但这个真的太令人印象深刻了 这个演示真的很棒 浏览网页既快速又有趣 而且快速查看真的能把东西 带进一个全新的维度 接下来让我们看看 如何在网站上整合 3D 内容 AR 快速查看最初是 在 iOS 12 中引入的 只需要一个指向带有特殊属性 和图像标记的 USDZ 文件的链接 用来显示 3D 模型的预览 同样的设置也适用于 xrOS 这样可以提供一个简单的方法 把 3D 物体放在他们的空间里 当然这也少不了 RealityKit 的高级照明 和渲染的支持 如果想进一步了解 请一定观看 “探索 USD 生态系统” 同样的 我们提议 将 HTML 模型元素 纳入将来的 W3C 标准 我们可以把它看作是 页面内部的 AR 快速查看 或者是 3D 物体的图像标签 它将在每个设备上 产生最佳的渲染效果 一直到完整的立体视图和环境照明 引入一个全新的元素 是一个很大的进步 所以我们从简单的开始 用一种简单的方法 指定你的 3D 对象的来源 和一个属性 用来 启用或禁用用户交互 JavaScript API 变得更加丰富了 你可以访问相机、 动画 甚至更多功能 听起来很有趣吧？ 如果你运行最新的 Safari 浏览器 可以在任何平台上 启用模型元素功能标志 如果你想更进一步 可以看看 WebXR 的 开发者预览版 这是一个 W3C 标准 用于在网络上构建完全沉浸式场景 WebXR 基于 WebGL 许多流行的 WebGL 库 已经有内置的支持 如果你有一个 3D 场景的代码 可以通过请求 WebXR 会话使其变成完全沉浸式 这与使用鼠标或触摸板 四处移动完全不同 你将完全置身于场景中 只有试过才知道 在 xrOS 上 你可以在 Safari 浏览器 的高级设置中 找到 WebXR 功能标志 而这还仅仅是开始 关于沉浸式网络 还有许多东西需要探索 像 CSS 变换和指针事件 这样的技术 必然会在这个新平台上发展 这也是为什么 Apple 积极参与 W3C 网络标准的定义和开发 而你也有机会提供意见 请告诉我们 你的想法和期望 你今天开始就可以尝试 新的 3D 体验 你可以轻松查看 xrOS 模拟器上的 交互区域 如果你发现任何错误 可以通过任意平台上的 反馈助理来联系我们 对于任何与 HTML、JavaScript 或 CSS 相关的问题 可以使用 bugs.webkit.org 上的 WebKit 错误跟踪器 说到 CSS 今年 Safari 浏览器 会有很多新功能 所以千万不要错过 “CSS 的新功能” 感谢大家的观看！ Tim：我们在沉浸式网络再相见！ ♪