WWDC23 最新消息
Safari 17 beta 版中的 WebKit 功能

2023年6月6日

作者：Patrick Angle, Jean-Yves Avenard, Marcos Caceres, Ada Rose Cannon, Eric Carlson, Garrett Davidson, Jon Davis, Karl Dubost, Brady Eidson, Matthew Finkel, Simon Fraser, Brent Fulgham, Rachel Ginsberg, David Johnson, Anne van Kesteren, Mark Lam, Sihui Liu, Justin Michaud, Jer Noble, Tim Nguyen, Ben Nham, Richard Robinson, Michael Saboff, Alexey Shvaika, Jen Simmons, Sam Sneddon, Brandon Stewart, John Wilander, Luming Yin

对 WebKit 来说，这是非凡的一年。自 WWDC22 以来，我们已经发布了八个 Safari 版本，仅在 2023 年上半年就推出了 140 多项新的 Web 技术。现在，我们很高兴地宣布，今年秋季 Safari 17 将推出另外 88 项 Web 功能。

Web 应用

Web 应用即将登陆 Mac。借助 macOS Sonoma，您可以将任何网站添加到您的 Dock 中。只需前往“文件”>“添加到 Dock”，根据需要调整名称和图标，Web 应用图标就会出现在您的 Dock 中。

Mac 上的 Web 应用让您能够专注于常用网站，并将其与普通浏览分开。与所有 Mac 应用一样，Web 应用可以很好地与“台前调度”、“调度中心”以及 Command + Tab 等键盘快捷键配合使用。Web 应用可以从 Dock、启动台和聚焦搜索中打开。Web 应用支持从 iCloud 钥匙串以及已采用凭据提供商扩展 API 的第三方应用中自动填充凭据。用户可以通过系统提示和“系统设置”的“隐私与安全性”部分，以与授予其他 Mac 应用相同的方式，授予 Web 应用使用其摄像头、麦克风和位置的权限。Mac 上的 Web 应用支持 Web 推送、徽章，以及 WebKit 实现的所有常用 Web 标准，就像 iOS 和 iPadOS 上的 Web 应用一样。

A web app for WebKit Blog shown on macOS Sonoma. With three other web apps as Stage Manager windows off to the side. And four web app icons in the doc. Plus a push notification coming in from the WebKit web app.

当用户点击 Web 应用图标时，即使网站没有清单文件（或旧版 meta 标签），该网站也始终会以 Web 应用的形式在其自己的窗口中打开。这扩展了 Web 应用的实用性，让用户能够决定哪些成为 Web 应用，并让他们相信这始终是他们可以选择的东西。

虽然 Mac 上的默认 Web 应用体验已经很棒，但作为 Web 应用开发者，您可以使用 Service Workers 等 Web 技术使其更出色。通过提供 Web 应用清单，您可以自定义 Web 应用的呈现方式，包括显示模式、名称、主题颜色和起始 URL。要了解更多详细信息，请观看 WWDC23 上的 Web 应用新特性。

当用户将网站添加到 Dock 时，Safari 会将该网站的 cookie 复制到 Web 应用中。这样，如果有人在 Safari 中登录了他们的帐户，他们将在 Web 应用中保持登录状态。这仅在身份验证状态存储在 cookie 中时才有效。Safari 不会复制任何其他类型的本地存储。用户将 Web 应用添加到 Dock 后，不会再共享其他网站数据，这对于隐私保护非常有利。

从 Safari View Controller 添加到主屏幕

现在，iOS 和 iPadOS 上的 Safari View Controller 中提供了“添加到主屏幕”功能。在将 Safari View Controller 用作应用内浏览器的应用中点击链接，用户可以直接从那里将打开的网站添加到其主屏幕。就像从 iOS 和 iPadOS 上的 Safari（或任何其他已实现支持的浏览器）中“添加到主屏幕”一样，如果网站的清单文件具有 standalone 或 fullscreen 的 display 模式，它将作为主屏幕 Web 应用打开。

空间网络

Three Safari windows floating in a room, almost reaching from floor to ceiling.

我们迫不及待地想让您在 Vision Pro 上试用 Safari。这确实是 Safari，拥有相同的 WebKit 引擎，并增加了一些新功能。得益于其对 Web 标准的广泛支持，您的所有网站都将开箱即用。您可以通过观看 WWDC23 主题演讲和 探索适用于空间计算的 Safari，了解 Vision Pro 上的 Safari 具体是如何工作的。

我们正在合作开发两项技术，以使空间计算中的 Web 功能更加强大 — <model> 元素和 WebXR。

Model

<model> 元素将提供一种无需任何脚本即可轻松在网页中呈现 3D 内容的方式。就像 <img> 和 <video> 一样，HTML 使 <model> 能够在任何平台上的 Web 浏览器中以健壮而简单的方式工作。Model 仍在规范中，可能会有所更改，但我们预计它将这样工作

<model src="asset/example-3d-model" width="400" height="300"></model>

通过创建声明式元素，我们可以利用成熟的模式来支持多种文件格式，同时为不支持的浏览器提供备用方案。

<model width="400" height="300" interactive>
    <source src="assets/example.usdz" type="model/vnd.usdz+zip">
    <source src="assets/example.glb" type="model/gltf-binary">
    <picture>
        <source src="fallback-version.mp4" type="video/mp4">
        <source src="fallback-version.webp" type="image/webp">
        <img src="fallback-version.gif"/>
    </picture>
</model>

interactive 属性将启用用户交互，并允许人们在原地旋转模型。随附的 JavaScript API 将提供更多功能，包括访问摄像头。<model> 的具体工作细节目前正在 沉浸式 Web 社区组进行讨论。

将丰富的 3D 内容嵌入网页的能力将开启无限可能。例如，一家在线鞋店可能会提供所有鞋子的模型。或者一个室内设计灵感网站可以提供家具模型，供人们在家中“虚拟放置”。Vision Pro 上的 Safari 将把这些体验提升到一个新的水平，提供完整的立体视图和环境照明 — 所有这些都以保护隐私的方式进行。用户正在看什么或看向哪里绝不会暴露给网页。

A Safari window floating in space, showing a tea shop website, offering teapots and tea cups for sale. On a table in the room, sits a virtual tea cup and teapot — from the website.

您可以通过打开 功能标志 并导航到此 演示页面，在 iOS、iPadOS 和 macOS 上的 Safari 中试用 <model>。

WebXR

当将 3D 模型嵌入网页不足以满足需求时，WebXR 提供了在网络上创建完全沉浸式体验的技术。WebXR 基于 WebGL，许多流行的 WebGL 库已内置支持。

A cartoon 3D world, mountains in the background. Lakes and swaps in the foreground.

Vision Pro 上的 Safari 目前对 WebXR 提供可测试的支持，通过功能标志提供，同时我们与 W3C 沉浸式 Web 工作组合作更新 Web 标准。WebKit 支持 WebXR 中的 immersive-vr 会话类型。Vision Pro 没有外部控制器。相反，您可以请求“手部跟踪”功能，让用户与您的内容进行交互。

访问沉浸式 Web 工作组的开发者页面 immersiveweb.dev，了解更多关于如何开始使用支持 WebXR 的不同框架，并找到最适合您项目的一个。

图像

JPEG XL

我们很高兴地宣布，Safari 17 将支持 JPEG XL。与 JPEG 类似，这种新的图像格式为在质量和文件大小之间找到适当平衡提供了另一个现代选项。JPEG XL 使用一种名为“模块化熵编码”的新压缩算法，允许在调整压缩比方面具有更大的灵活性。凭借对渐进式加载的支持，它非常适合通过慢速连接提供的图像，因为用户在整个文件下载完成之前就开始看到图像。您可以将现有的 JPEG 文件重新压缩为 JPEG XL，而不会丢失任何数据，同时平均减小 20% 的大小。或者从原始图像文件压缩，创建比 JPEG 小 60% 的文件！

使用 <picture> 元素向支持 JPEG XL 文件的浏览器提供此类文件，同时为不支持的浏览器提供回退方案。

<picture>
  <source srcset="images/large/sophie.jxl" type="image/jxl">
  <img src="images/large/sophie.jpeg">
</picture>

WebKit 将在 macOS Sonoma、macOS Ventura 和 macOS Monterey 上的 Safari 17、Safari View Controller 和 WKWebView 以及 iOS、iPadOS、watchOS 和 visionOS 上支持 JPEG XL。

HEIC

我们还在 Safari 17 中增加了对 HEIC 图像的支持，HEIC 使用 HEVC 视频编解码器压缩算法。HEIC 是 iPhone 和 iPad 上用于存储相机拍摄照片的文件格式。通过 Safari、Safari View Controller 和 WKWebView 中对 HEIC 的支持，开发者可以直接在浏览器中支持导入和编辑此类照片，而无需将其转换为其他格式。在使用 WKWebView 在应用内部显示图像时，HEIC 也是理想的选择。

Image set

Safari 17 还改进了我们对 image-set() 的实现，作为我们对 Interop 2023 承诺的一部分，增加了与其他浏览器的互操作性，并增加了对可选的 resolution 和 type 参数的支持。type 参数为您提供了一种方法，可以向浏览器提供多种图像格式供选择，包括 JPEG XL 和 HEIC。

.component {
  background-image: image-set(
    url("images/trees.jxl") type("image/jxl"),
    url("images/trees.avif") type("image/avif"),
    url("images/trees.jpeg") type("image/jpeg")
  );
}

视频

托管媒体源

Safari 17 的 WebKit 还带来了新的托管媒体源 API。它提供了一种节能解决方案，作为流媒体视频的低级工具包，满足了高级需求。

自适应比特率流允许在媒体数据格式之间切换 — 即使这些条件发生变化，也能根据用户的互联网连接速度和设备功能，确保提供最佳的视频质量。媒体源扩展 (MSE) 是一种现有的自适应流媒体低级工具包，它赋予网页更多控制和责任来管理缓冲和分辨率。但 MSE 在管理缓冲级别、网络访问和媒体变体选择方面表现不佳。而且它在移动设备上耗电量很大。

托管媒体源增加了 MSE 的功能，而没有任何缺点。它在 iPadOS 17 beta 和 macOS Sonoma beta 上可用，并在 iOS 17 beta 上处于预览状态，可以通过打开其功能标志进行测试。请注意，托管媒体源仅在存在 AirPlay 源替代方案时才可用。

通过观看 WWDC23 上的探索 Web 媒体格式，了解更多关于 JPEG XL、HEIC 和托管媒体源 API 的信息。

媒体播放器统计叠加层

Video in a video player, with an overlay showing the stats for that video.

如果您已启用开发者功能，WebKit 现在提供了一个媒体播放器统计叠加层，您可以在其中查看视频的技术详细信息 — 其源类型、大小、性能指标、分辨率、编解码器字符串和颜色配置。要显示叠加层，请在任何 <video> 元素上使用上下文菜单并选择“显示媒体统计信息”。现在，您可以一目了然地知道页面上媒体使用的确切编解码器和配置，并使用该信息在 MediaCapabilities 中构建准确的查询。

更多视频功能

WebKit 现在支持 iPadOS 17 上的 USB 摄像头。当 USB 摄像头连接到 iPad 时，它会包含在 enumerateDevices() 的输出中，并且可以与内置摄像头一起通过 getUserMedia() 进行选择。

WebRTC 的改进增加了对 InputDeviceInfo、入站 rtp trackIdentifier 统计字段的支持，在 MediaTrackCapabilities 中公开了 zoom，并支持 getDisplayMedia 视频轨道克隆大小调整。

Safari 17 的 WebKit 增加了对低功耗模式的额外支持 — 通过将 HDR 视频进行色调映射到 SDR 来优化视频流。

HTML

弹出框

Safari 17 增加了对 popover 属性的支持。它提供了一个用于显示覆盖层、弹出窗口、浮层和对话框的框架。弹出框有两种类型，可以用作 popover 属性的值

  • auto 弹出框，当您点击弹出框外部时会自动关闭；以及
  • manual 弹出框，不具备这种自动关闭行为。

使用按钮（无论是 <button> 元素还是按钮输入类型）来创建打开和关闭弹出框的 UI。并添加相应的 HTML 属性以创建所需的结果。

popovertarget 属性通过 ID 将按钮连接到弹出框内容。可选的 popovertargetaction 属性接受 show、hide 或 toggle 作为值。默认情况下，使用 toggle。

<button popovertarget="info-box" popovertargetaction="show">More info</button>

<article id="info-box" popover="auto">
  <h2>Additional Information</h2>
  <p>Here’s something I wanted to tell you.</p>
  <button popovertarget="info-box" popovertargetaction="hide">Close</button>
</article>

这只是您可能会觉得有用的一种 UI 模式。还有许多可能的组合。在 HTML 中拥有弹出框机制可以快速完成工作，同时确保出色的可用性和完全的可访问性。

为了超越简单的按钮触发，JavaScript API 通过 showPopover()、hidePopover() 和 togglePopover() 开启了更强大的可能性。

更多 HTML 功能

macOS 上的 Safari 17 增加了对 <select> 内部 <hr> 的支持，这是 WebKit 团队添加到 HTML 标准中的一项功能。这使得在项目之间创建视觉分隔符变得更容易，而无需使用 JavaScript。

<select>
  <option value="pizza">Pizza</option>
  <option value="hamburger">Hamburger</option>
  <hr>
  <option value="sushi">Ice cream</option>
  <option value="pasta">Cake</option>
</select>

<menu> 元素现在映射到 role=list。插槽元素现在在 <dialog> 或 aria-modal 内部时会被宣布。并且现在使用 aria-labelledby 引用的插槽元素被正确标记。

CSS

计数器样式

Safari 17 增加了对 CSS 计数器样式的支持，通过 @counter-style 提供了一种在 CSS 中更改计数器语言或字符集的机制 — 既适用于带有 list-style-type 的有序/无序列表，也适用于 CSS 计数器。

@counter-style upper-serbian {
  system: alphabetic;
  symbols: 'А' 'Б' 'В' 'Г' 'Д' 'Ђ' 'Е' 'Ж' 'З' 'И' 'Ј' 'К' 'Л' 'Љ' 'М' 'Н' 'Њ' 'О' 'П' 'Р' 'С' 'Т' 'Ћ' 'У' 'Ф' 'Х' 'Ц' 'Ч' 'Џ' 'Ш';
}
ol { 
  list-style: upper-serbian; 
}

字体大小调整

在 Safari 16.4 中，我们发布了对 font-size-adjust 的初步支持，它允许您轻松地使不同字体的视觉大小保持一致 — 即使在所有可能的备用字体组合中也是如此。font-size-adjust 的基本版本允许您告诉浏览器调整字母大小，使其 x-height 是 font-size 的特定比例。

在 Safari 17 中，我们正在扩展支持，以包含 font-size-adjust 的更高级功能，包括 from-font 值和双值语法。from-font 值允许您不再使用数值声明比例，而是要求浏览器从指定的主字体中获取尺寸指标，并将该比例应用于所有字体。双值语法允许您从调整 ex-height 切换到调整 cap-height、ch-width、ic-width 或 ic-height — 为更广泛的语言和设计选择提供支持。

让我们来看一个例子。在这里，font-size-adjust 告诉浏览器使 article 内部的所有字体与所使用主字体的 x-height 大小匹配。这意味着段落和代码中的所有文本在视觉上将显示为相同的大小，无论应用了哪个字体栈中的字体，也无论段落和代码字体在实际大小上有多么不同。

article { 
  font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
  font-size: 1.4rem;
  font-size-adjust: from-font;
}
article code {
  font-family: "Courier New", monospace;
}

要了解更多关于 font-size-adjust 的工作原理以及计数器样式的全部内容，请观看 WWDC23 上的 CSS 新特性。

Safari 17 还带来了对 @font-face size-adjust 的支持，它提供了一种在定义字体使用时规范视觉大小的方法。

文本转换

Safari 17 增加了对 text-transform: full-width 和 full-size-kana 的支持，并增加了对多个 text-transform 值的支持。full-width 值将文本字符串中的所有字符转换为“全角”——以匹配中文、日文或韩文等东亚文字字符的大小。这在排版 CJK 时，对于提高尺寸一致性特别有用。full-size-kana 值将日文片假名字符的大小转换为全角，而不是通常的小尺寸——在需要时有助于使 ruby 文本更清晰易读。

字体支持

为了扩展 Web 排版的功能，Safari 17 增加了两个功能查询，用于根据浏览器对字体技术或格式的支持情况来编写 CSS：@supports font-tech() 和 @supports font-format()。字体技术指的是某些字体中使用的特定 OpenType 技术，例如 COLRv0。Safari 17 还增加了对 @font-face { src: url() tech() } 的支持，使得定义依赖于新技术的字体使用变得容易，同时为不支持的浏览器提供回退方案。

@font-face {
    font-family: "My Cool Font";
    src: url("mycoolfont-COLRv0.otf") format(opentype) tech(color-COLRv0),
         url("mycoolfont-outline.otf") format(opentype);
}

媒体查询 4 级

Safari 17 完善了对 媒体查询 4 级的支持，增加了对两个新媒体查询的支持。与其他查询一样，overflow-block 和 overflow-inline 提供了一种根据用户设备特性（在这种情况下，设备如何处理溢出）有条件地应用 CSS 的方法。例如，它能像电脑上的普通浏览器一样滚动页面吗？它会像电子书阅读器一样分页内容吗？或者它没有处理溢出的机制，就像数字广告牌一样？

更多 CSS 功能

Safari 17 的 WebKit 包含多项修复，以改进 display: contents 的可访问性，包括使 aria-activedescendant、aria-dropeffect、aria-flowto、aria-grabbed、aria-owns、AXAccessKey、CSS speak-as 和 URL AX API 在应用了 display: contents 的元素上工作。以及计算依赖标签或标题的 display: contents 元素的可访问名称，并使 display: contents 元素能够返回选定的可访问性子元素。

Safari 17 还增加了对 contain-intrinsic-size 的支持，它提供了一种在元素受 尺寸限制时，设置用于布局的元素大小的方法。

为了增加 :has() 的实用性，WebKit 现在支持 :has(:buffering) 和 :has(:stalled)，以扩展根据媒体播放状态有条件地应用 CSS 的能力。Safari 17 还支持 :has(:defined)，用于根据自定义元素是否已定义来应用样式。

为了跟上容器查询 Web 标准的最新变化，Safari 17 增加了对 containerName 和 containerQuery 的支持，并更新了 CSSContainerRule 中的 conditionText 为 containerName containerQuery。

JavaScript 和 Web API

离屏 Canvas

在使用 Canvas 时，渲染、动画和用户交互通常发生在 Web 应用程序的主执行线程上。离屏 Canvas 提供了一个可以在屏幕外渲染的画布，从而解耦了 DOM 和 Canvas API，使得 <canvas> 元素不再完全依赖于 DOM。渲染可以转移到 worker 上下文，允许您在单独的线程中运行任务，并避免主线程上的繁重工作对用户体验产生负面影响。独立于 DOM 的操作与主线程渲染的结合可以为用户提供显著更好的体验，尤其是在低功耗设备上。对离屏 Canvas 2D 操作的支持已在 Safari 16.4 中推出。现在，Safari 17 增加了对离屏 Canvas 中 3D 上下文的支持。

存储

WebKit 对存储配额策略进行了一些重大更新。以前，一个源的起始存储限制为 1 GB。超出限制时，后续存储操作将在主屏幕 Web 应用中失败，或者用户会在 Safari 中看到一个提示，要求增加该源的配额。从 macOS Sonoma、iOS 17 和 iPadOS 17 开始，配额将根据总磁盘空间计算，无需用户输入。源通常会获得更高的限制，并且 Safari 中不会提示用户。要获取当前源配额和使用情况的估计值，您可以使用新支持的 navigator.storage.estimate() 方法。

由于每个源默认获得更高的存储限制，当所有源的总使用量超过某个值（基于总磁盘空间计算的“整体配额”）时，WebKit 将按源逐出数据。当其存储模式为持久化时，源将免于逐出。要检查您的源的存储模式，您可以使用 navigator.storage.persisted()；要请求将模式更改为持久化，您可以使用 navigator.storage.persist()。已进行关键错误修复，以确保存储模式值在会话之间被记住，并且逐出将依赖于它。存储 API 现已完全支持。

正则表达式

Safari 17 增加了对两个新的正则表达式功能 JavaScript 支持：带集合表示法 + 字符串属性的 RegExp v 标志和RegExp 重复命名捕获组。RegExp v 标志功能允许创建包含 Unicode 属性的正则表达式，包括一些多字符表情符号序列。它还允许创建具有字符类和字符串集合上的并集、交集和减法集合操作的正则表达式。

重复命名捕获组功能允许创建具有命名捕获的正则表达式，其中一个以上捕获组使用相同的名称。这使得您可以创建具有直观组名的正则表达式，其中存在多种单向搜索模式。一个例子是创建一个正则表达式，可以搜索以多种方式编写的数据字符串，例如 M/D/Y 与 D-M-Y，同时提取匹配结果时，捕获组名称为month、day和year，无论匹配到哪种字符串格式。

集合操作

另一个新的 JavaScript 功能增加了几个新的集合操作方法，包括 intersection() 和 union()，以及比较方法，包括 difference()、isSubsetOf() 和 isSuperSetOf()。这些新方法共同使 Set 成为一流对象。

const setA = new Set(["apples", "oranges", "grapes"]);
const setB = new Set(["bananas", "grapes", "apples"]);

// Union into single set!
const union = setA.union(setB);

// Interection "apples" and "grapes"
const intersect = setA.intersection(setB);

// Difference "oranges"
const diff = setA.difference(setB);

等等。另请查看新的 .symmetricDifference() 和 .isDisjointFrom() 方法，它们开启了一些有趣的比较可能性。

游戏手柄 API

Safari 17 的 WebKit 增加了对 Gamepad.prototype.vibrationActuator 的支持。它可以在游戏手柄上启用“双震动”触觉反馈。该 API 允许您检查游戏手柄是否支持“双震动”，以及控制触觉效果的持续时间和强度。

const [gamepad] = navigator.getGamepads();
if (gamepad?.vibrationActuator?.canPlayEffectType("dual-rumble")) {
  const options = {
    duration: 1000, // 1 seconds
    startDelay: 0, // play now
    strongMagnitude: 0.5, // low-frequency vibration
    weakMagnitude: 0.2,  // high-frequency vibration
  };
  gamepad.vibrationActuator.playEffect("dual-rumble", options);
}

URL API

传统上，为了确保您能够解析 URL，您需要使用 try 序列。现在，您可以通过 URL.canParse(tentativeURL, optionalBase) 直接检测 URL 输入是否可以被解析。该方法将返回 true 或 false。

此外，URLSearchParams 上的 has() 和 delete() 方法已得到扩展。has() 方法可以检测参数是否已设置。而 delete() 方法可以删除参数。到目前为止，您只能通过名称进行检查和删除。现在，这些方法已得到扩展，以便您可以检查和删除特定的名称-值对。

例如，以下 URL 中 currency 是一个重复键：https://example.com/?currency=USD&currency=JPY，以前您只能检查 params.has('currency')。现在可以这样操作：params.has('currency', 'JPY')。

请注意，在此次更新中，方法签名无法直接进行功能检测，因此它们可能会返回误报。在所有浏览器都支持这些更新之前，请务必运行一个小型测试以确认支持。例如

// These return true only when the updated API is supported!
function supportsUpdatedURLHasMethod() {
    const param = new URLSearchParams({ key: "value" });
    return param.has("key", "does not exist") === false;
}

function supportsUpdatedURLDeleteMethod() {
    const param = new URLSearchParams({ key: "value" });
    param.delete("key", "does not exist");
    return param.has("key");
}

Web Sockets

您现在可以在 WebSocket 构造函数中使用相对 URL（以及 HTTP(S) URL）— 这使得指向 WebSocket 端点变得更容易，而无需将 URL 硬编码到您的 Web 应用程序中。例如，new WebSocket('/updates')。

更多 JavaScript 和 Web API 功能

  • 支持 <link rel="modulepreload">。
  • 支持 焦点修复规则。
  • 支持 Ed25519 加密。
  • 支持暂停和恢复后台抓取。
  • 支持 ReadableStream。
  • 支持 fetch 优先级提示。
  • 支持 customElements.getName 方法。

Web 开发者工具

重新设计的“开发”菜单

在 macOS Sonoma、macOS Ventura 和 macOS Monterey 上的 Safari 17 中，完全重新设计的“开发”菜单让您更容易找到创建网站、Web 应用、其他应用中的 Web 内容、Web 扩展等所需的关键工具。

the new Safari 17 Develop menu, with far fewer items, showing icons for iPhone and iPad

设备和模拟器现在在“开发”菜单中更加突出，使它们一目了然。在每个 iOS 或 iPadOS 设备的菜单中，应用图标让您更容易找到要检查的应用或 Web 内容。在 macOS Sonoma 上，您可以直接从 Safari 与 Apple TV 和 Vision Pro 配对以检查这些平台。

重新构思的功能标志

the Safari feature flag settings window with a list of technologies, some on, others off.

新的功能标志面板取代了“开发”菜单中以前的“实验性功能”部分，允许您搜索特定功能并轻松查看从默认状态切换的粗体显示的功能。功能标志现在按主题组织：动画、CSS、HTML、JavaScript、媒体等。每个功能都明确分为四种状态之一：稳定、可测试、预览和开发者。

稳定（Stable）代表最近在 Safari 中推出并默认开启的功能。这些功能可以关闭，以帮助您调试问题或测试渐进式增强。稳定功能最终将从列表中移除。

可测试（Testable）功能默认禁用。这些功能可能正在实现过程中，或者正在等待 Web 标准的更改。它们还有一段路要走，但仍然足够有趣以供测试。

预览（Preview）适用于尚未在 Safari 中推出，但接近完成的功能。这些功能在 Safari 技术预览版中默认启用，并已准备好供开发者试用。它们可能仍有错误，甚至可能随着 Web 标准的发展而发生重大变化。这是一个发现和提交错误，并评论新技术的 Web 标准是否满足您需求的好时机。

开发者（Developer）功能不太常见。此类别适用于添加到功能标志列表中的杂项功能，以便开发者可以将其开启和关闭进行测试。例如，开发者工具可能会出现在这里。

新的开发者设置面板

the new Safari Developer settings window, listing what can be toggled

Safari 17 “设置”中的新“开发者”面板允许您切换适用于 Safari 中所有打开网站的开发者功能，例如“允许远程自动化”（可使用 WebDriver 自动化 Safari）以及以前在“开发”菜单中的其他功能。

新的标签页特定设置叠加层

Web Inspector tab-specific settings overlay

“开发”菜单中一些以前的全局设置，例如禁用 CSS 或更改 WebRTC 行为，已移至 Web Inspector，现在它们仅限于所检查的标签页，允许您正常使用其他标签页和窗口。

重新设计的响应式网页设计模式

Redesigned Responsive Design Mode in Safari with configurable viewport size, scale, and simulator menu

响应式设计模式也已刷新，重点关注页面设计在 Mac 上任何宽度或高度下的响应能力。除了拖动视图周围的调整大小手柄外，您还可以在响应式设计模式的顶部输入特定的视口大小。

新功能还包括能够直接从响应式设计模式中在模拟器中打开页面。

模拟器

即使您没有使用响应式设计模式，也可以直接从 “开发”>“使用以下方式打开页面” 菜单中，在模拟器中打开 Safari 中的任何页面。

使用模拟器是测试您在 iOS、iPadOS 以及即将推出的 visionOS 上创建的体验的绝佳方式 — 包括设备特定行为，例如渲染的类型大小、viewport meta 标签的效果、双击缩放，甚至 iOS 和 iPadOS 上的主屏幕 Web 应用。模拟器是免费的，并且包含在 Mac App Store 的 Xcode 中。

macOS Sonoma with a simulated iPhone on screen, showing a website. The Develop menu is open, with the user selecting the website in that simulator.

如果您没有安装 Xcode，在“开发”>“使用以下方式打开页面”菜单以及响应式设计模式中的“使用模拟器打开”菜单中都提供了便捷的文档链接，以帮助您开始使用，或添加更多设备和操作系统版本。

在 WWDC23 上的 重新发现 Safari 开发者功能 中，了解所有关于新的“开发”菜单、重新设计的响应式网页设计模式、如何轻松直接连接真实设备、如何安装和使用模拟器等等。

Web Inspector

我们还对 Web Inspector 进行了改进。在使用压缩后的源代码时，Web Inspector 中的美化打印有助于使代码更易于阅读、设置断点和调试。Safari 17 中的新功能是，支持更多 JavaScript 语法用于美化打印压缩脚本，包括模板字符串、可选链、类中的私有变量和函数以及静态变量和函数。

Safari 17 中 Web Inspector 的变更还包括

  • 元素 (Elements) 标签页：增加了设置，以便在 Web Inspector 或元素选择模式中突出显示元素时，始终显示网格和 flexbox 的标尺和元素叠加层。
  • 元素 (Elements) 标签页：在字体侧边栏中添加了变体轴的编辑控件。
  • 控制台 (Console) 标签页：增加了显示控制台消息时间戳的设置。
  • 控制台 (Console) 标签页：增加了查看 WeakRef 目标的支援。
  • 源 (Sources) 标签页：在检查和记录 JavaScript 对象时，增加了对 ES2022 私有字段的支持。
  • 图形 (Graphics) 标签页：增加了对 OffscreenCanvas 的支持。

通过观看 WWDC23 上的 Web Inspector 新特性，了解更多信息。

安全性

GPU 进程

去年，WebKit 在 iOS、iPadOS 和 watchOS 上引入了 GPU 进程支持。今年，我们将在 macOS Sonoma 上增加支持。这一变化将所有绘制操作（包括页面内容、2D Canvas 和 WebGL 渲染的绘制）都转移到“GPU 进程”中进行。这种新架构允许 WebKit 将强大的图形硬件和驱动程序访问权限与 WebContent 进程（与来自互联网的不可信内容交互的进程）隔离开来。新设计还允许 WebContent 进程沙盒完全阻止 IOKit 访问，从而提高了安全性。

WebKit API

WKWebsiteDataStore 和相关类中新增了接口，以进一步释放您的 WebKit 应用的潜力。新功能包括创建持久的网站数据存储、配置 Cookie 策略、自定义代理设置、为所有导航请求 HTTPS 升级，以及控制自动填充的内联预测状态。

浏览器变更

Safari 个人资料

Safari 17 增加了对个人资料的支持。历史记录、收藏夹、标签页组以及网站数据（如 Cookie、缓存、Service Worker 和 Web 推送订阅）都按个人资料进行划分。用户可以单独管理每个个人资料的数据。

Safari 无痕浏览

在 Safari 17 中，“无痕浏览”通过增加对某些最先进的跟踪技术的保护，变得更加私密。技术变更包括

  • 增加对已知跟踪器和指纹识别的阻止。
  • 增加对缓解将子域名映射到第三方 IP 地址的跟踪器的支持。
  • 增加对链接中已知跟踪查询参数的阻止。
  • 对可指纹识别的 Web API 增加干扰。
  • 在阻止对已知跟踪器的请求时，增加控制台日志消息。
  • 增加对阻止使用第三方 CNAME 伪装的跟踪器的支持。
  • 增加对直接响应广告的私人点击测量 (Private Click Measurement) 的支持，类似于其在应用内直接响应广告中的工作方式。

文本光标颜色

在 macOS Sonoma 上，重新设计的文本光标现在使用系统强调色并匹配 iOS 行为。您仍然可以使用 caret-color CSS 属性自定义颜色。

实况文本

Safari 17 增加了对图像和视频中竖排文本识别的支持。

通过 Payment Request API 使用 Apple Pay

现在，您可以通过设置 allow="payment" 属性，在第三方 iframe 中启用 Apple Pay。此“权限策略”可在 iframe 上启用 Payment Request API，允许您嵌入第三方支付处理程序。如果使用此功能，请务必同时使用 X-Frames-Options HTTP 头，以防止您的网站被恶意网站嵌入。

身份验证

Safari 17 增加了对通行密钥 (passkeys) 的 largeBlob 扩展支持。网站可以使用额外的存储空间来保存数据，这些数据可以在以后使用通行密钥登录时检索。这些保存的 Blob 会与通行密钥同步和共享。

我们还在 iCloud 钥匙串中增加了对通行密钥企业版 WebAuthn 证明 (enterprise WebAuthn attestation) 的支持。托管设备在创建通行密钥时，可以使用通过 MDM 提供的证书来提供证明声明。

网络

Safari 17 增加了通过 HTTP Early Hints 实现 preconnect 的支持。

锁定模式

锁定模式现在

  • 禁用 IndexedDB。
  • 禁用 File API 和 FileReader API。
  • 禁用对 <embed> 元素的支持。
  • 禁用 Web Speech (语音合成) API。
  • 禁用 WebLocks API。
  • 禁用对实验性 API 的支持。
  • 支持部分 Web 字体。

watchOS 上的 WebKit 现在也支持锁定模式。

Safari 扩展

Safari 17 现在允许您以更精细的粒度自定义扩展的运行位置。

首先，Safari App 扩展现在拥有与 Safari Web 扩展相同的按站点权限模型。它让用户可以控制与他们在 Safari 中使用的每个扩展共享的浏览数据。

其次，作为额外的控制层，Safari 扩展可以在“无痕浏览”中关闭。访问浏览数据（例如浏览历史或网页内容）的扩展在“无痕浏览”中将默认关闭，但可以通过 Safari 设置中的单个开关允许。

第三，所有 Safari 扩展都可以按 Safari 个人资料开启或关闭。您可以想象，这对于在相关个人资料中开启仅用于学习或工作的扩展，但在其他地方保持关闭会很有用。每个个人资料运行扩展的一个独立实例 — 这意味着有独特的存储区域、后台页面、Service Worker 等。但是，按站点的权限在个人资料之间共享，因此扩展只需被授予一次。如果您的扩展利用原生消息功能与主机应用通信，则可以区分个人资料，以确保您的扩展在不同个人资料中表现正确。

通过观看 WWDC23 上的 Safari 扩展新特性，了解更多信息。

错误修复及更多

要了解更多关于 Safari 17 为 Web 开发者带来的功能，包括大量的错误修复列表，请阅读Safari 17 beta 版发行说明。

帮助我们进行 Beta 测试

您可以通过安装 macOS Sonoma、iOS 17 或 iPadOS 17 的 beta 版来测试 Safari 17 beta。

或者，如果您愿意，可以在 macOS Ventura 或 macOS Monterey 上试用 Safari 17 beta，方法是下载 Safari 17.0 公共 beta 版，该版本将在今年夏天晚些时候推出。您需要使用免费的 Apple ID 登录才能下载。请注意，安装 Safari 17 beta 将替换您现有的 Safari 安装，并且无法恢复到早期版本。

反馈

我们乐于听取您的意见。发送推文给 @webkit 分享您对 Safari 17.0 beta 的看法。您可以在 Mastodon 上找到我们：@jensimmons@front-end.social 和 @jondavis@mastodon.social。如果您遇到任何问题，欢迎您就 Safari UI 提供反馈，或者提交关于 Web 技术或 Web Inspector 的 WebKit 错误报告。提交问题确实能带来改变。

下载最新的 Safari 技术预览版，以保持在 Web 平台的前沿并使用最新的 Web Inspector 功能。