面向网页开发者的新增内容

（为网页开发者设计的新东西）

大家早上好 我是Devin 我非常激动 今天能在这和大家 聊一下WebKit的新功能 我今天要讲的有很多 我们直接进入主题吧 今年 有很多专为网页平台 和网页开发者 设计的令人激动的新东西 今天我们会了解很多不同的主题内容 从网页特殊的API 到你能提供更原生的网页内容 体验的新方式 我们会讨论很多 那我们开始吧 从深色模式开始

系统的深色模式首次在 macOS Mojave被介绍 但今年 iOS 13上也支持了

这意味着桌面和移动端 现在都可以适配深色模式 但不要担心 它并不复杂 让你的网页内容适配深色模式 同样很简单 我们来看一下 首先 添加一个带有深色值的 配色方案CSS属性 到任意CSS根规则中 它将会告知WebKit 整个网页都会支持深色模式 当处于深色模式时 默认文字 背景颜色 和表单控件 都会自动更新适配深色主题 但如你所见 自定义样式并不会改变 所以 你还要自己来更新它们 你可以使用一个你喜欢的 暗色方案CSS媒体查询 它和其他任何CSS媒体查询 表现行为一致 意味着它包含的样式 只会在系统的深色模式中

你能使用它来改变任何其他 的自定义样式 比如CSS图片和其他颜色 来在页面中和其他深色主题保持一致 但是 对于不在CSS中的图片 你可以通过使用HTML的图片元素 来使用完全一样的媒体查询 当用户启用深色模式时 它会让两张图片自动切换 就是这么简单

显然地 对于其他内容 你能一直使用 JavaScript matchMedia API 使用同样的媒体查询 来处理其他动态内容

所有的这些技术 都能让你很简单的适配深色模式 来支持你网页剩下的内容 我们非常期待你的超级酷炫 的深色主题网页

了解相关更多信息 WebKit博客里 有一篇很棒的博文 WWDC app里 也有一个很棒的视频 介绍在网页内容中支持深色模式 你一定要看看

我们非常快速的介绍了 如何在网页内容中支持深色模式 它非常简单

下面我们聊聊你能使用的很简单的 API 叫做Web Share 它允许你在网页内容中 加入原生的分享表单

它符合通用标准规范 能在任何地方使用 在Safari或是 app里的WK网页视图 特别棒的是 今年的iOS 改进了所有的原生分享表单

就像调用 navigator.share 处理相关的数据那么简单 如果一个分享动作完成了 它返回一个许可 或一个拒绝 如果分享表单消失了 但请留意 这个API的调用被 用于回应用户的手势 比如一个点击

所以 如果不是对应的场景 它会立刻回绝

最酷的事情是 你已经看到 运作中的网页分享 已适配了绝大多数的网页 一个很好的例子是Twitter 它已经对深色模式做了非常大的支持 点击页面上的任意分享图标 就会打开原生的分享表单 包括了标题和推文的连接 在iOS 12.2或以后的版本 你也可以自己试用一下

这就是网页分享API 一个在你网页中 引入原生功能性非常简单的方式

现在 我们来看一下新媒体功能 如果你想要在你开发的网站 能在用户的设备上 提供最舒适的阅读体验 你现在可以使用新的 Media Capabilities API 来判定视频的编解码器是否支持 又或是视频的编解码器 能很快地终止任意帧 或者在回放过程中非常高效 这能让你做出更明智的决定 来展示你想要的内容类型

提到视频内容 macOS Catalina 和iOS 13 也能支持alpha通道的视频了 alpha通道视频支持 所有HEVC编码包含透明像素 的视频内容 一个非常好的用户案例是 当用户选择深色模式时 它允许你的视频 能无缝衔接至周围内容中 不像创建两个分开的视频 一个用作浅色模式 一个用作深色模式 一个有着透明背景的视频 适用于两种模式 alpha通道视频如今 能在任何地方使用 它没有特殊的语法和MIME类型 它都能运行

但在你使用它之前 你想知道alpha通道视频 是否能在例如旧的 iOS或macOS上运行 在使用 Media Capabilities API时 你可以在功能对象上 添加一个alpha通道关键字

如果你想要了解alpha通道视频 的更多内容 包括如何在macOS Catalina 创建这些视频 你一定要看看使用alpha 创建HEVC视频的视频

但如果你是一个开发 点对点聊天功能网站的开发者 也想支持屏幕截图 你现在能使用Safari 13的 getDisplayMedia API 调用它获得一个许可 然后立刻通知用户启用截图权限 如果权限被通过 这个许可回返回一个标准的 包含了Safari窗口的流媒体 返回的流媒体像 其他的标准的流媒体表现一样 意味着它能与WebRTC一起使用 分享你的屏幕给他人

这些就是 macOS Catalina的 iOS 13和Safari 13 上媒体的一些新功能

现在 我们来聊一些新工具 它们可以让你的网页内容 在所有平台中更灵活的布局 作为一个网页开发者 我们工作的一部分 就是要确保我们要 提供一个低耗电 或减少不必要的性能损耗的体验

为了帮你更好地了解可能发生的事情 网页检查器上加入了新的 CPU时间线 这个界面包含了可执行信息 我们希望你能高效使用它 所以 我们在WebKit博客 发布了一篇博文 以及在WWDC app里 发布了视频 都是关于了解网页检查器的 CPU使用量的说明 你一定要看看 它会让你的网站产生奇迹

iOS引入了WebDriver 升级至iOS 13的所有设备 已支持W3C的自动化 和回归测试的标准测试形式 你可以用WebDriver 来为你的网页内容 实现自动化集成测试 确保你支持的所有平台 不论是桌面端还是移动端 都能像你期待的那样运行良好 iOS上的WebDriver 和macOS上的非常相似 developer.apple.com 上有很棒的文档说明 我们未来也会有相关的文档说明

现在 我们来聊聊 如何在网页内容中存储结构化的数据

过去 我们主要有两种方法 IndexedDB和WebSQL 在Safari 13上 WebSQL已经被遗弃了 所有的现代网页浏览器 包括Safari 都支持IndexedDB 过去几年 我们一直在努力让它更加标准化 所以 如果你还不确定是否 要尽快过渡使用IndexedDB

最后 我们来聊一下 Apple Pay 在网页上最简单地接受付款的方式 我们主要会讲两件事 首先 Apple Pay Payment Request API 已经完全支持所有的功能 它具备Apple Pay JS的 隐私保护 安全 以及为你的网页内容带来了一个 更为标准的流线型体验 我们非常建议你转换使用 Payment Request API 它支持Apple Pay JS 的所有功能 同时它也在不断被改进 想要深入了解如何在Apple Pay使用 Payment Request API 今天晚些时候将有相关博文发布 在WebKit博客上 会深入分析这些新提升的功能 第二

在iOS 13 你现能在WKWebView 内部使用Apple Pay

是的

这意味着你能在更多app上使用 Apple Pay了 但你还要注意一些事情 当一个用户尝试通过 Apple Pay完成一项购买时 他们需要在网页内通讯 而不是网页浏览器或app 在交易期间 用户和网页之间 不应该有其他阻碍 甚至在开始前就要 所以 这意味着 当你在WKWebView内部 使用Apple Pay时 限制更少了 当你在WKWebView 插入脚本时也同样如此 它是这样工作的 如果当前页面的 WKWebView中 被插入过脚本 我们将不被允许使用 Apple Pay

如果当前页面已经通过 Apple Pay付款方法 canMakePayments 调用过 我们以后将不能插入脚本 它们将会被一个错误阻止

但是 所有的这些限制只在 当前页面被限制 所以 一些高级别的导航 会导致它们重置

所以 这是什么意思呢？

如果你是一个网页开发者 你一定要在尝试展示 Apple Pay按钮前 调用 canMakePayments 或甚至在使用任何和 Apple Pay有关的内容之前 这样 你的用户就不会遇到 看见了一个Apple Pay按钮 然后点击却无反应 （因为已被禁用）的情况了

相反的 如果你是一个app开发者 请认真思考是否需要通过 例如 WKUserScript API 或是调用completionHandler 的evaluateJavaScript来插入脚本 我们已经看过过去一些App 插入脚本的示例 WebKit API 能做同样的事情 那样做没有原因 通过加入脚本 你会妨碍已经加载的网页内容 提供它最好的用户体验 （尽可能使用WebKit API 而非Javascript） Apple Pay 有什么新功能呢？

这是一个今年为网页开发者 提供新功能的快速展示 你也会想参加 iPad上的桌面类浏览的演讲 它将会介绍如何 使用其他网页平台的新功能 比如指针事件让你桌面端的网页 使用起来像是在家里玩iPad一样

我非常希望你能喜欢 为网页开发者提供的新功能 我们很期待你能 使用这些新功能和新工具 来设计优质和全新的体验 祝你们度过愉快的一天