Safari 浏览器和 WebKit 新功能

各位 下午好

好的 我希望你们到目前为止 仍在享受着 WWDC 我知道 过去的这个星期是令人激动的 一个星期 各种公告 新功能 软件更新 开发者工具 接踵而来 我的名字是 Shloka Kini 我在开发者出版物部门任职 也就是说 借一句 Cardi B. 的歌词 “我现在不仅编程” “还要写文件” 尤其是撰写 能够帮助你们编出精彩 App 的 说明文档

今天 我有幸向大家介绍 一些 Safari 和 WebKit 的新功能 所以 如果你在设计网站 并且想应用最新的网络科技 最新版本的 Safari 那这场演讲正适合你 如果你是一名使用网页视图的 App 开发人员 或者是扩展程序的开发人员 这场演讲也会对你有所帮助 还有 哪怕你并不在 我刚才提到的任何一个领域内任职 你依然应该坐下来听听 因为 Safari 的最新版本 拥有一些非常棒的功能 能够提升你的浏览体验 现在 已经出现了很多 很多新的改进 尤其是我们举办了 What's New 演讲之后 不过今天 我将着重介绍其中的一部分改进 它们真的能帮你写出安全的

具有良好性能的 App 融入最新的科技 以得到最丰富的体验 而且 它们中的很多都是免费的 那么 让我们从安全开始讲起 还有一些公告声明 WKWebView 我知道你们在想什么 WKWebView 自从 2014 年起 就出现了 严格来讲 它不是新事物 然而 它还是值得再次被提起 因为现在我们正式地反对 UIWebView 所以 如果你正在编写一个新的 App 或者一个新的项目 你想要展示一些 web 内容 但它们很难以原生视图展示 请使用 WKWebView 另外 即便你以前使用过 UIWebView 转换也并不困难 如果你是在 macOS 和 iOS 两个平台同时进行 开发工作 它绝对可以在开发 App 方面帮你节省时间 因为 WKWebView 在两个平台都适用 而 UIWebView 是针对 iOS 的 WebView 则是针对 macOS 的 所以 你可以共享很多的程序代码 在这两个版本之间

另外 WKWebView 也能 在一个完全单独的过程中运行 独立于你 App 的其他部分 所以 和 UIWebView 不同 即使你的 web 进程受到损害 它也不会影响你的 App 如果你的网页视图有 复杂的内容 也不会使你的 App 意外中止 而且 即使 WKWebView 崩溃了

它也只局限于网页视图的框架内 而非整个 App WKWebView 能够提供安全方面的优势 同时保证你的 App 性能卓越 值得信赖 所以 不管转换到 WKWebView 是复杂还是简单 你从中得到的种种好处 都令人觉得 这种改变是值得的 接下来的一个声明包含扩展 不过拓展 Safari 我的意思是 它在过去这些年来 已经改进了很多 那么 我们一开始就先快速 回顾一下 Safari 扩展的历史 在 2010 年 在我们建立起 App 可扩展性的平台概念之前 当时只有最初版本 Safari 扩展 那些是 Safari EXTZ 文档 你可以在 Safari Extensions Builder 中建立这些文档 它们可以通过 Safari Extensions Gallery 库 被分配出去 或者 在一些不常见的例子中 直接被开发人员分配出去 这些最初版本的扩展 都具有不可思议的强大威力 因为它们能获取你所有的 浏览数据 你也会因此变得更“受欢迎” 尤其易受诈骗和恶意软件的侵扰 我们需要去建立一个安全防火墙 那就是为什么我们没有 在最初版本的 Safari 扩展那里 停止工作 那么 我们故事发展的下一个里程碑 出现在 2014 年 那时 我们为 macOS 和 iOS 两个平台都 建立了 App 可扩展性能 不过 App 扩展是 扩展 App 的一种方式 而不是 Safari 的扩展方式 但重要的是 这个举动极大地改变了 我们对于扩展的理解 在苹果的各个平台上 在这里 你可以明确地扩展系统 与此同时 用户可以 与其他 App 进行互动 而且和 App 一样 它们可以建立在 Xcode 开发环境下 由于这个更好的扩展模型的出现 我们想要将这些概念中的一部分 在返回到最初版本 Safari 扩展中进行应用 而在当时 最受欢迎的一些是广告拦截器 于是 我们在 2015 年引入了 内容拦截器 内容拦截器是一种在 Xcode 开发环境下 的 App 扩展 它在 macOS 和 iOS 系统下都能够使用 它们所拥有的特殊结构 令其可以快速运行 因此 任何内容拦截器 在拦截方面都比 任何最初版本 Safari 扩展都要快速 它们不会降低 浏览速度的能力 而且保护隐私 因为这些扩展 永远看不到你的用户在 浏览什么网页 在这一点上 App 扩展模型提供了如此多的 性能优势 于是我们想 或许我们能把这些概念 带回到最初版本 Safari 扩展 那样我们就能在两方面都得到最佳结果 一个能够扩展 Safari 功能性 的扩展功能 同样它也能 扩展你的 App 令它能和 Safari 对话 基于此在 2016 年 为 macOS 系统开发的 新版 Safari App 扩展问世了 这种扩展 Safari App 的方式 能够在 Xcode 的环境下进行编写 同时 不同于以往的 App 扩展 这次你可以通过 App store 获得 App 扩展 也就是说 这些扩展可以是免费的 也可以是收费的 无论是使用哪种方式 你都不需要自己买单

因此 与 2010 年的最初版本扩展相比 内容拦截器与 Safari App 扩展 具有非常大的优势 所以 你最应该做的事情就是 如果你还在使用最初版本的 Safari 扩展 赶紧切换到 Safari App 扩展 同样 如果你还在使用广告拦截器 请切换到内容拦截器 现在 我们已经将这些工作全部完成 我们还能用最初版本的 Safari 扩展做什么呢 难道去诈骗吗 从 Safari 12 开始 我们已经正式停止了对 Safari Extensions Gallery 之外的 旧版扩展的支持 旧版的扩展仍然可以 在 Safari 12 中使用 只要它们还在 Gallery 库里

唯一的例外是 那些使用被弃用的 Can Load API 的扩展 我们将其默认为关闭状态 我们将继续接受 对 Gallery 库的申请 直到 2018 年年底为止 不过 我们将在接下来的一年时间里提供 更多的更新同时 将最终完成向 Safari App 扩展 的彻底转型 因此 现在你最该要做的事情就是 赶紧学会如何在这两种模型下 开发扩展 App 那么 怎么学习呢 请查看教学文档 在此感谢开发人员 出版物部门 到现在为止 我们已经宣布完了两条 针对使用 WebViews 的本体开发人员 以及扩展开发人员 的最重要的公告 这些功能的其余部分 主要是关于如何进行 web 开发 下面 让我们从子资源的完整性开始说起 现在 作为一名开发人员 你可能 通过 HTTPS 连接 向用户输送你的内容 并且 由此产生的内容 可能还包含由第三方服务器发布的 部分内容 比如一个内容输送网络 这两个连接可能都是 安全可靠的 可能都使用 HTTPS 这也就意味着你保有 机密性 身份验证信息 以及传输数据的完整性 但是 万一第三方服务器本身 受损害了怎么办 这也不是没有可能 在这种情况下 HTTPS 连接 仅能够确保连接 但它不能确保服务器没有受损 它可以修改脚本 同时变换你提供给用户的样式 在第三方服务器受到损害的情况下

子资源的完整性将保证 你不会给你的用户 提供受到损坏的脚本 那么 这是如何完成的呢 通过哈希算法 首先 你需要添加一个完整性属性 到一个脚本或者链接元素 在你的标记语言中 这个属性的数值是一个 hash 你使用安全的哈希算法 去创建这个 hash 当一个用户抓取了文件 那么另一个 hash 也就计算了出来 比较这两个 hash 如果它们不相同 则你的脚本 将不能被执行 这一过程确保 脚本在受损的情况下 将不会被执行 除非它们和你预期的相匹配 不然你的脚本将不会被执行 当然 为了保证你不会丢失掉 功能性 你还可以 提供一个回退处理用于重新加载 服务器里面的资源 在第三方服务器脚本 不能执行的前提下 现在 阻止受损的资源 不让它们去执行 就能确保用户的安全 而且 智能跟踪预防法可以保证浏览 体验的隐私性 好的 我知道你们可能听说过 智能跟踪预防法这个词 在 Keynote 上 这是 Safari 的一个功能 它可以降低交叉网站的跟踪度 通过限制带有跟踪能力的 cookies 和网站关于域的数据的方式 另外 在之前的版本中 cookies 是通过两个规则来保留的 第一个规则是 cookies 可以在用户与第一方 产生互动的 24 小时内 被第三方所使用 第二个原则是 在 Safari 使用的 30 天内 包括最初的 24 小时 那些 cookies 将被 单独存储 然后才被删除 不过 现在我们正在加强对它的控制 我们正在移除对于一般 cookie 的 24 小时接触窗口 针对带有跨站点追踪能力的域

不过 默认的情况是 所有的 cookies 都被单独存储 作为开发人员 我清楚经过可靠验证的嵌入 是非常重要的 对于你们的工作流以及 与 web 内容的互动来说 那么 你怎么才能准许 经过可靠验证的嵌入呢

那就是 使用 Storage Access API 使用了 Storage Access API 每当出现一个带有跨站点追踪的域 它希望在第三方背景下 获得 cookie 那么你需要 提出存储访问的请求 如果用户以前没有授权同意访问 就会出现提示框 询问用户是否允许 在这个站点 去访问 cookie 通过让用户给出 明确的是否允许访问 cookie 的意见 我们赋予了用户去 管控自己的 cookies 以及 哪些网站可以进行追踪的权力 令他们的浏览体验 更加具有私密性 如果他们愿意的话 接下来 我们来谈谈 使用自动填充强密码 进行身份验证 我相信你们已经在 State of the Union 以及几天前的演讲中看过这个了 自动填充强密码是一个 能够保证用户 选择并存储强密码的方法 当他们在设置 新账户的时候 并且 这个功能其实对每个人都好 我是说 我喜欢把自己想象成 一个愿意选择使用 强密码的人 但是一段时间过后 我会逐渐发现我的密码 并没有想象中那么强 而且我可能已经在 好几处地方用过它了

对于大多数开发者来说 你不要费力就可以享用 这个功能 因为启发式算法会 判断你是在注册账户 还是在登录页面 不过 为了保证这个管用 无论登录流程是怎样的 需要把 AutoComplete 属性添加到 适当的那些输入栏中 现在 我们默认选择的强密码 是长度为 20 个字符 包括大写字母 和小写的字母 数字和连字符号 虽然这项功能被设计成能够 和大多数服务兼容 我们也承认 有些时候你的密码需要 符合某些特定的要求 才能与后台系统兼容 正因为这个原因 你可以添加一个 passwordRules 属性 到你的文本元素中去 来详细说明那些要求 另外 在开发者站点 有一个密码验证工具 帮你去测试自动填充强密码的兼容性 并开发出 你自己的密码规则

另一项在 State of the Union 中提到的 功能是 Security Code AutoFill 这是另一项大多数人都将能够 免费获取的功能 这项功能我会加以好好利用 因为我发现 不停转换是件很麻烦的事 在我的 App 和 网站之间 还有信息 还要为代码 寻找那些数字 将它输入进去并尝试记住它 那么 让 Safari 计算出 我该在什么时候输入安全代码 然后在快速输入栏中 进行提示 这样会让过程更加便捷 而且 就像从前一样 你能免费得到这项功能 因为它使用的是启发式算法 不过为了确保这些算法能够正确运行 并且你能在快速输入栏里 获得提示 将输入区域 的 AutoComplete 属性标记为 one-time code value 想了解更多的话 希望你们能在线查看 Automatic Strong Passwords 以及 Security Code AutoFill 的板块 好 这就说完了安全问题 刚刚我们谈了更换到 WKWebView 然后聊了 Safari App 扩展的 内容拦截器 还有自资源完整性能够 自动防故障 确保你不会 向用户提供受损的脚本 还有智能追踪预防法 它通过 Storage Access API 改善用户的 隐私 然后 用自动填充强密码 还有 security code AutoFill 你可以向用户提供 安全便捷的功能 咻 感谢你们还留在这里 好的 那就让我们继续吧 来谈谈有关性能的各种功能 先从字体集合说起 对了 如果你错过了这场演讲的开场 我的名字是 Shloka Kini 这不是一个盎格鲁-撒克逊式的名字

然后 这里是我的名和姓氏 是以印度语中的梵文天城体 来书写的 用多种字体 不同的粗细 和样式 但都是同一组文字内容 今年起 我们开始支持 WOFF 2 和 TrueType 字体集合 将相关字体捆绑在 在单个集合文件内 可以消除字符映射 的重复表格 举例来说 我们的一种内置字体 PingFang 在使用集合后 文件大小 减少了 84％ 字体集合能够 大大地减少 你的字体文件的大小 因为不同字体对于同样的字母集合 共享了同一个表格 下一项要介绍的功能是 字体展示 对于大多数开发者来说 无需做出改变 本质上来说 如果你有使用 自定义字体的 web 内容 不管出于什么原因 你的用户 看不到它们 默认情况下 我们会为文本 留出最多三秒的空白占位符 在显示字体之前 以保持屏幕上 所有内容的位置 但是 如果这个默认的选项 不适合你 并且你对于那三秒内会发生什么 想拥有更多的控制 你可以使用 字体显示描述器 设定不同的数值 你可以指定另一种字体 作为备选 或者检查 浏览器是否在缓存中有那种字体

现在 你可以使用一个很酷的技巧 来改善动画图像的性能 那就是 使用视频 我超爱我 Mac 笔记本背景中的 彩色粉尘爆炸 它真的很好看 但它是静态的

我想要这个图案能“嘭” 爆炸 我是说 我希望让它动起来 我想要一个 GIF 动画 但是 动画 GIF 需要更长的时间 才能加载 而且耗费更多的电池电量 与展示同样内容的视频文件相比 更能更差一些 现在在 Safari 中 MP4 视频文件 在图像元素中也能得到支持 充分利用了苹果内置的 硬件视频 解码支持 我的内容加载速度更快 耗电量更少 性能也更好 但我同样可以在 CSS 背景图片的属性下 使用 MP4

如果你采用了这种技术 只用最简单的方式 你就可以得到一个新版本 只是它无法与 旧版浏览器兼容 旧版的浏览器不支持 MP4 和图像元素 幸运的是 使用现有技术 你可以指定一个备用图像用来替代显示 在 MP4 无法运行的情况下 各位请注意了 现在我们要转向下一个话题 事件监听器 这又是一个 拥有很好的默认设置的功能 在特殊情况下还可以 有自定义的设置

任何用户在尝试使用触摸屏 浏览网页时 他们需要滚动屏幕 对于每一次滚动触摸 触摸的事件监听器都会被触发 这就会中断滚动触摸 并造成它有一点跳动 来看看这两个例子 看 左边的一个与右边相比 被中断干扰得要更严重 我的意思是 它几乎没有移动 那么 右边是哪里 做对了呢 因为它使用了 被动事件监听器 默认情况下 我们会在 文档 窗口和主体元素上设置启动 被动事件监听器 这样一来 任何的触摸 都会指示浏览器 去继续滚动屏幕 避免因为等待事件监听器完成任务 而被中断 如果你想要把事件监听器的 其他元素也设置为被动 你可以把那些 事件监听器的 被动属性 设置为 “true ” 简单来说 在不阻碍默认事件进行处理的情况下 这个标志告诉浏览器 不要去等待事件监听器完成 并且让用户可以 流畅地滚动屏幕 接下来 我们转向具有 异步图像解码的 异步调用 通常来说 图像都是被 同步解码的 所以 主线程遭到了阻塞 所有的图像都被解码 然后显示出来 阻塞了主线程 用户的交互也受到阻止 不过 如果使用异步解码 这些操作就能并行发生 并且是在一个单独的 线程上 这意味着交互 不会被阻止 今年新增的异步图像解码功能 在默认的情况下 会在首页加载时发生 它可以覆盖大多数 web 内容的情况 当然 我们知道 你们中的一些人 可能会遇到特殊情况 比如说 在你的网页上有一张 多块组合平铺的地图 它在初始页面加载后进行加载 而且 如果它有很多图像 部分图块可能会延迟显示 或者 可能你在 App 中放入了一些 轮播的图像 并希望它们有淡入淡出的轮播效果 但当你想要加速播放 这组幻灯片 如果图像是同步解码的 它们可能无法及时显示出来 而且它们会突兀地切换

但在右侧的例子中 异步解码让你的淡入淡出效果 更加平滑流畅 那么 如果你想要采用这些特殊的 动态图像的范例 你有两种选择 一 你可以在标记中添加 异步解码的属性 到你的图像元素中去 或者 你可以使用 JavaScript API 的 HTMLImageElements.decode 方法 它会返回一个提示 让你知道图像在何时 可以被添加到 dom 而不会导致下一帧的解码延迟 下面 继续说 异步调用对于 Beacon API 的支持 我们知道 作为开发人员 你想要在 unload 事件中发送数据 可能是想要追踪外发链接 通常情况下 unload 事件的异步请求 会被忽略掉 于是你不得不使用 同步请求 结果就导致下一个页面 加载失败 不过 我们现在支持 Beacon API 所以只要 Safari 还在运行 你就可以将数据发送到服务器上 然后把它抛在脑后 因为你知道数据一定会被 发送出去的 好了 你们已经听我讲的够多了 我相信你们都想亲眼看看 这些与安全和性能相关的功能 实际操作起来什么样 那么 有请我的同事 Jason 上台来为大家演示这些功能 Jason 大家好 我叫 Jason Sandmeyer 我是 Apple.com 的一名开发人员 不工作的时候 我喜欢艺术和手工创作 比如建造鸟舍 然后我最近开始 写这个博客 想要分享 我的一些作品 并给其他人以启发 我花费了大量的时间去挑选 合适的字体和舒服的颜色 我为此感到骄傲 不过 我不仅仅是为 自己的设计感到骄傲 我也为自己能够向用户提供 良好 安全 高性能的浏览体验 而感到自豪 因此 我真的对于 WebKit 和 Safari 这些能够提升性能和安全的新功能 感到非常兴奋 我真的希望 在我自己的站点上 充分利用它们 我很乐意向你们演示 它们使用起来是多么容易

这里 我已经将我的网站 加载到我的 MacBook Pro 上

然后 喔 好的 嘿 Jason 你刚刚做了什么 没错 这可不是我刚才自夸的那个 漂亮的博客 对吧

让我们来看看 这是正确的 URL

我想我知道这里发生了什么问题 当我刚开始设立这个网站时 我的朋友们曾提醒我 生活类博客的 行业竞争相当激烈

很明显 有人在蓄意破坏我的网站 有人偷偷替换掉了 我内容分发网络的样式表 不过很幸运 我还留有备份 我们可以使用 子资源完整性的功能 为网站提升安全性能 确保这种情况不再发生

所以 我先从添加新的完整性属性 到我的链接标记开始操作 值得注意的是 这个改动对脚本 也有影响 不过我们 晚些时候再做改变 我们稍后再进行添加 那么 这个属性的数值 是哈希算法的结果 我们用这个算法能够得到文件的校验和 我希望自己和用户 可以看到它 我已经准备了一个 hash 叫 SHA256

接下来 一个连字符 然后是 base64 编码用于表示这个 hash

现在 进行保存 然后回到 我们的页面 重新加载

现在我们能看到网页 没有样式 因为已下载文件的 hash 和 HTML 里的 hash 不匹配 因此 Safari 已经阻止它去加载

现在 让我们连接到我的 CDN 这是我桌面上的备份 让我们把备份拖入 CDN 当中 以替换受损的文件 现在 我们重新加载 这就看起来好多了 谢谢 所以在使用了 子资源完整性的功能后 我更加确信网站访问者 能获取我预想中的 样式和脚本 下面 让我们稍稍换个方向 来谈谈我们在 改进性能方面 能做些什么 另外 如果能知道我网站上 哪些链接被用户频繁点击 哪些很少被点击 这是很有用的信息 这能帮助我在设计时 做出更明智的决策

所以我用这个 click handler 它能够向我控制的服务器报告 哪些链接被用户点击过 服务器会收集点击量的数据 供我有空时查看

还有 请注意在我点击 这个木工页面的链接时 会发生轻微的延迟 点击后会进入我网站里 其他与木工相关的页面

我现在就点击这个链接

花了大约半秒到一秒钟时间 之所以会这样 是因为我在 click handler 中 做出了同步请求 这会阻止 Safari 导航到下一页 进行同步请求 可确保浏览器在导航到下一页时 不会取消这一请求

但是 这是在等待 我的服务器响应可能需要 一段时间 问题是 我其实不关心什么 服务器响应 我只想确定这些数据 传送到了服务器上 因此 Beacon API 其实是 一个完美的替代品 现在我要开始通过 检查 Beacon API 在浏览器中是否可用 方法是在 navigator 对象上 查找 sendBeacon 方法 如果它不可用 我就继续我 刚才在做的事情

然后 我们可以使用它

把数据和我想要访问的 endpoint 一同传入 让我们进行保存 然后返回去 重新加载 新的脚本

现在 当我点击这个链接时 可以看到反应几乎是立刻的 我现在要点击这个链接了 好了 所以 与 XML/http 请求相比 这个使用的代码更少 但它同样的可靠 而现在 我的用户 在我的网站里 就能更快速地畅游了 谢谢大家 接下来 我想看看一个问题 这个问题在 iPad 上更加明显

我把建造鸟舍的 每一步都做成了幻灯片 并加入了淡入淡出的轮播效果

点击向右的箭头 就能前进到下一张幻灯片

不过 你可能已经注意到了 切换时 在图片的位置会出现 短暂的空白 让我来再翻几张幻灯片

让我们来看看这个轮播的代码 看看发生了什么 我觉得这个切换效果 可以更流畅

这里是轮播的类 我想要仔细看看这个方法 在这里叫 setCurrentSlide 这个方法会在 你点击箭头 转换到下一张幻灯片时被调用

由于每张幻灯片在加载页面时 不会立即显示 只有当用户点击箭头时 我的轮播才会加载下一张幻灯片的图像

我们遇到的问题是 页面切换是瞬间完成的

而不是等图像加载完再发生 而且 在图像加载之后 它仍需要被解码 然后才能在屏幕上显示出来

所以 我想做的是 等待图像加载 并且被加码 我相信这样图像就能顺畅显示 而且我可以使用新的解码方法 在 HTML 图像元素上

来改进显示效果

这里 是我的图像 是图像元素的标记

decode() 方法会 异步地解码这个图像 然后返回一个 Promise 如果图像成功被加载并解码 就会调用响应函数 resolve 所以 我就把我的 transition 函数传入 作为这个 Promise 的回调函数 现在 让我们切换回 iPad

我们来刷新页面以获取 新的脚本

现在 当我前进到下一页的时候 过程会更加顺畅 没有闪烁 这真的很棒

谢谢

现在 让我们切换回 Mac 最后 在我的页面底部 放置了一个动画的 GIF 图片 一只小鸟在装饰 它的新鸟舍 这张图片 这个视频 非常的大 好吧 它是一个 GIF 它大概有超过 7 兆字节 说实话 图片质量也不怎么好 不过 我恰好有这张图片的原始视频 H264 编码的 MP4 现在 我可以直接在页面上 使用这个视频 让我们回到 HTML 找到那个图像 它在这儿 我可以直接改变扩展名 改为指向 MP4 文件

重新加载 看 现在我使用的就是 真实的视频 画面质量清晰得多 而且只占大约 1 兆字节 而且它还比刚才的动画 GIF 要长一些 而且 正如 Shloka 刚才提到的 这点也可以使用在 source 属性上 为不支持这个功能的浏览器 提供一个备用的图像

刚刚这些只是 Safari 和 WebKit 的 众多有关安全和性能的新功能中的四个 希望你们能在自己的网站上 把它们充分利用起来 我想你的用户会为此感谢你的 现在 欢迎 Shloka 回到台上 向大家介绍更多 令人兴奋的新功能 谢谢

谢谢 Jason 对了 我真没想到 博客圈中竞争那么残酷

你保护好自己

还有 非常感谢刚才 精彩的演示 再总结一下与性能相关的新功能 使用字体集合 可以减少字体文件的大小 font-display 属性可以让你 更好把控使用自定义字体时 会遇到的各种情况 在图像元素中使用视频 比使用 GIF 更能提升性能 被动事件监听器能够改进 滚屏的效果 使用带有 Beacon API 还有图像解码的 异步调用 可以防止主线程卡壳 演讲的最后 我们来谈谈 更加丰富的用户体验 我们有一些很酷的新功能 能够真正提升用户的体验 从拖放开始讲 首先来介绍一些有关拖放的 总体上的改进 由于 API 的更新 现在你可以把整个文件目录 进行拖放 以将其上传至服务器 不再需要压缩或者打包处理 而且我们支持读取和写入 能够丰富 HTML 的 MIME 类型 纯文本 以及 URL 到系统粘贴板

而且 特别是对 iOS 我们已经对数据传输 API 进行了一些新的更新 现在你可以使用 getData 和 setData 方法 来自定义拖放 举例来说 如果我想要 把生活用品拖入 我的网上购物车 我可以对拖放行为 进行自定义 比如 拖动一个图片元素 会将这个元素的名称 和它的价格 放到我的购物车中 现在 你可以指定 拖放行为会导致什么结果 这会让你实现

接下来 我们来转向本场演讲的 API 部分 从支付请求 API 和 Apple Pay 讲起 那么 我们来谈谈 Apple Pay Apple Pay 不仅仅是一种支付方式 它是对电子支付的 完全重新思考 通过 Apple Pay 商户不会 直接接触到顾客的 信用卡信息 这使支付更加安全 我们知道你们当中许多人 一直要求提供一种方式 能够使用标准 API 来支持 Apple Pay 现在 我很高兴告诉大家 我们听到了你们的需求 通过协作努力 Apple Pay 现在 已经开始与 W3C 支付请求 API 展开合作

不过 虽然你可以选择使用 这个 API 但请记住 为确保你和你的顾客 在 Apple Pay 的利益不受损 你需要做一点改变 例如 要向你的界面添加一个 Apple Pay 按钮 而不是在现有的结账流程中 把 Apple Pay 当作选项之一 添加进去 而且 现在支付请求 API 中 还包含一些功能 比如 粒错误处理 处理品牌合作联名信用卡 和拼音姓名 这些功能只在 Apple Pay JS 里有 所以 如果你需要那些特定的 Apple Pay 功能 开始使用 Apple Pay JS 吧 我们支持的另一个 API 是 Service Worker API

如果你的用户的网络连接 不是很理想 比如他们的连接时断时续 或者他们就彻底断网了 对于这种情况你想要 从容优雅地进行处理 那么 Service Worker 可以派上用场 每个 Service Worker 都登记在 唯一的源下面 它可以缓存离线交互 并拦截 与这个源相关的脚本 所做的请求 现在 你网域中的每个网页 都可以共享同一个 Service Worker 实例 所以 你可以同时打开 多个选项卡 并且所有的请求都将被 相同的脚本拦截

这样一来 你可以保留一个 持久的资源库

Service Workers 可以令你的网页 无论它是一个 web App 还是说你在使用 SF Safari viewController 面对网络连接的各种不确定 网页都能够快速复原 最后要介绍的 API 是 对于 iPad 的全屏 API

现在你可以自定义 iPad 的全屏控制设定 对于 Safari 中的任一元素都可以 点击那些元素 将带来彻底的全屏体验

对于视频来说 我们会自动检测内容 同时还会出现一个 取消按钮 在短暂的延迟后 如果内容还在继续播放 按钮会自动消失

如果你提供的内容 会被这个取消按钮 所拦截或阻碍到 可以使用 CSS Environment Variable 中的 fullscreen-inset-top 来避免这种情况

你也可以让你的内容 和按钮同时隐藏 只要使用 环境变量中的 fullscreen-auto-hide-delay 就行了 最后 还有几项非常酷的标注要介绍 从 AR 开始 可能在这次会议上你已经听说过 太多关于 AR 的东西了 但是现在 你可以把 AR 模型 通过图像缩略图的方式 加入到你的 UI 当中 这样一来 你的网站就能 利用起这个全新的 AR Quick Look 而且代码还相当短 你从一个锚标签开始 将 del 属性设置为 AR 并将 HREF 链接设置为 你的 USDZ 文件 然后为 AR 模型创建文件格式 你先添加一个子视图 可以是一个图像 也可以是一个 包含模型图片的照片元素 出来的图像效果是 像这样的 在图像的右上角 一个小的图标出现 意味着一个 AR 模型可通过 点击图像来获得 这是一个能为你的网站 增添内容深度的 绝妙方法

如果想了解更多关于 Quick Look 的信息 可以查阅在线板块 Integrating Apps and Content with AR Quick Look

接下来 最后一块内容是 watchOS 现在 你可以浏览网站的载体已经有 MacBook 和 iPad

甚至是拥有更小屏幕的 iPhone 屏幕小到可以装进口袋里 但是 我们现在还打算 再缩小一度 我们把你的网站带到了 watchOS 中 对于这个新功能 我个人是 非常兴奋的 我妈整天给我发送各种菜谱 我不会做饭 然后我又只能 在短信和电邮中看菜谱 以后当我收到菜谱 我可以直接在手腕上读取 一边做饭一边看菜谱很方便

现在 如果你使用响应式设计 那就太好了 我们把所有的工作都替你做了 这样你的网站在 watchOS 上面 会看起来非常棒 不过如果你想要 进一步地优化 Apple Watch 的网页 这里有一个视频 叫做 Designing Web Content for watchOS 在 WWDC App 上 抱歉 是 Designing

现在 我打赌 Jason 的鸟舍博客 在使用了这些能够丰富用户体验的 新功能后 肯定能上升到一个新水平 所以 我打算把 Jason 请回台上 为大家演示这些功能 如何使用 Jason 再次感谢 我一直在想 如何能让我的读者能够 更加愉快地开始 他们的鸟舍建造工程 让我们换回到 iPad

这里 我有一个清单 列出了我的读者需要购买的 材料都有哪些 而且我想 如果我能够给他们 提供一种添加购物车的途径 购买他们可能会需要的物品 那该多方便 而且他们甚至可能 直接从我的网站 进行采购 而且 我猜想我也许能 通过这个办法赚点私房钱 这里 我能够从左侧 拖放物品到 这个购物清单中

而且这个功能在我的 iPad 上也一样好用 那么让我们来看看 想要达到这个效果 需要哪些代码

真的不需要一大堆代码 就能实现这个效果 对于每一个物品 我添加了 dragStart 事件监听器 它用来存放元素的文本 通过使用 Data Transfer API

而在“放”的区域 也就是购物清单区域 我有一个 drop 事件监听器 它可以从 Data Transfer API 上

提取之前存储的文本 并将其附加到购物清单元素

注意 你还需要添加一个 dragOver 事件监听器 到你想要“放下”元素的区域 以防止默认的事件的发生 并明确指示对于那个元素 drop 是允许的 所以 只需要很少的代码 我就能够创建这个有趣的 购物 UI 它能在 Mac 上很好地运行 现在在 iPad 上也能使用了 现在 既然我已经把物品 放在了购物清单里 我需要找到一个方法 让我的用户 能够真正实现购买 让我们来看看如何能 利用支付请求 API 来为用户提供一个很棒的 Apple Pay 体验

我已经为我的网站添加了 必要的 HTML 和 CSS 以显示一个 Apple Pay 按钮 但我把它默认设置成隐藏 只有在用户的设备确定有能力 使用 Apple Pay 的情况下 你才应该显示 Apple Pay 按钮

让我们来写下 检查设备的代码 使用 ApplePaySession.canMakePayments 方法 如果 Apple Pay 可使用 我们就显示按钮

让我们向按钮添加一个

事件监听器 现在 在这个函数里 我们将创造一个新的 paymentRequest 实例去 启动这个交易

如果 paymentRequest 不能使用 我们应该考虑使用 Apple Pay JS 来替代它

这里是 Payment Request API 的构造器 它可以接受三个参数 我们从添加 paymentMethod 数据对象开始

这包含了 Apple Pay 的 paymentMethod 识别符 以及 Apple Pay 特有的 一些选项 在这之后 是付款相关的各种细节 这里是我们指定 有关交易细节的地方 例如我的网站名称 交易总额和每个订单项 我决定让事情简单化 所以我把清单上的 每一项物品的定价都设为 5 美元

最后 options 参数 指明了我需要从我的用户那里 收集哪些信息 来完成交易 让我们切换回 iPad 并且加入一些物品到我的清单里

那么 现在我们已经把所有的信息 输入进来了 我们需要去调用另一个方法来 展示这个表格 这就是对于 paymentRequest 的 show 方法 并且这个方法会返回一个 promise 当用户授权这笔交易的执行 做出支付回应时 就会调用响应函数 resolve 用户可以用 Face ID 或 Touch ID 等方式授权 这里是你可以 处理交易的地方 然后 最后一步 你可以调用 complete 获得一个交易成功或失败的值 这由交易的状态来决定 好的 现在我们在 iPad 上 实践一下

这样就行了 然后 你还需要执行 一些其他的步骤 例如 从 Apple Pay 服务器上 获取付款会话 想了解关于这点的更多信息 请查看 Apple 开发者网站的 有关这个演讲的网页 上面会有关于这些资源的链接

现在 最后我意识到 我还没有让我的读者们看到 他们在建造的东西 整体是什么样子的 所以我想在页面的顶端 添加一个成品的 展示图

不过 为什么要满足于一张静态图片呢？ 如果你能在自己周遭环境里 真的看到这个鸟舍 感觉一下它的尺寸大小 那不是很棒吗 那么 通过 iOS 12 中的 新 AR Quick Look 功能 我们只需要几行代码 就能实现

我们来进入我的 HTML

来插入代码 我现在所要做的就是 添加一个图像 并且链接到一个 USDZ 文档 它就是我的鸟舍模型 把 rel 属性设为 AR 切换回 iPad

这就是我们最终成品的样子 它看起来很不错 不过用户 还可以点击 AR Quick Look 的小图标 就在角落这里 我们可以查看这个模型 上下左右地挪动它 还能把它放置在真实环境里 直观地感受一下我 要建造的是什么 所以 其实实现起来 真的很简单 请查阅相关的板块 如果你有机会的话 现在我想请 Shloka 回到台上 来做最后的总结 谢谢大家 非常感谢 Jason 而且这个 AR 模型看起来 非常非常的酷 而且 我认为它真的让我

想要建造一座鸟舍 不过我可没有做出任何承诺

综上所述 你可以添加自定义的 拖放功能 还可以自定义 iPad 的 全屏控制设定 你可以采用 Payment Request API 以支持 Apple Pay 的使用 采用 Service Worker API 以改善离线的用户体验 或者 你还可以为内容添加 AR 模型 以增加其深度 而且现在你的网站也可以在 苹果手表上浏览 我在演讲中提到了几个板块 供你们参考这几个单独的功能 不过如果你们在这场演讲结束后 立刻就有问题要问 请顺便来访问 Safari WebKit and Password AutoFill 实验室 并且可以查看 这个板块的链接 还有文档资源 以及其他相关的板块 现在 关于 Web 真的有太多太多的功能 我希望这个简要的概述能够 让你们感受到 苹果公司是如何不断地改进 对 Safari 和 WebKit 的支持 以便于 web 开发者 本地开发者 还有扩展开发者 能够一直为他们的用户 提供尽可能 好的体验

感谢各位在场参与 我们的板块 希望你们喜欢 并且 祝大家接下来在 WWDC 的时间 过得愉快 [ 掌声 ]