在 iPad 上打造桌面级浏览体验

（在iPad上进行桌面级浏览的介绍）

大家早上好 欢迎参加演讲203 在iPad上进行桌面级浏览的介绍 我叫Charles Ying 与我一起演讲的还有 来自Safari WebKit团队的 Wenson Hsieh和Beth Dakin

我们将与大家分享桌面级浏览 对此我们感到万分激动 它是iPad上网络平台的一个 重大的新改进

正如你在主旨演讲中所听到的那样 iPadOS上的Safari 现在是一个桌面级的浏览器了

那意味着什么呢？

这意味着你可以在Safari中 实现更多功能 现在你可以使用Safari 实现你希望在网页上 实现的一切伟大的功能

Safari是新的下载管理器 因此你可以下载和上传文件… 同时还可以使用其它标签 甚至是其它app

Safari还有新控件 全页缩放 当你需要更多工作空间时 隐藏工具栏 以及根据不同网站设置不同偏好 为工作流程量身定制Safari

并且现在Safari可以使用 桌面浏览器上 所能使用的全部的键盘捷径了 从而让工作速度更快 并帮助你专注于你所做的工作

但一切的关键是… 浏览桌面网站

我们长期以来一直在做网页浏览器

当生产出第一台iPhone时 所有网站看起来都很大 那是为了鼠标输入而打造的

这些网站在iPhone上看起来 超出了边界… 如果不对它们进行修改的话… 让它们适应小屏幕以及多点触控操作

iPhone应该调整网站 使其适应文本尺寸 从而可以让你阅读

接着你们有了新的网络API 让你们的网站 最大化地利用iPhone的性能

而结果非常了不起

你们中有一些人用过响应式设计技术 从而让网站灵活地适应 任意尺寸的显示屏 如今那些网站 在iPad上看起来很不错

但也很常见 因为网站有两个不同的版本 一个是适应大显示屏的 一个是适应小显示屏的

iPad使用了移动用户代理 意思是它会使用小显示屏版的网站

因此在iPadOS中有个新功能 对于网站来说 iPad就是一台Mac

这并不仅仅是用户代理的变更 还是WebKit的一系列 深层次的根本性变更 那会打造一种了不起的新体验 让我们具体来看一下其中两个变更

有些电脑版网站 目的是在大屏幕上显示大量信息

这些网站在大iPad上是放大的 并且你不能看到 与电脑版浏览器同样多的信息 WebKit使用了视窗来展示网站 对于每种iPad尺寸都一样 从iPad Mini 一直到最大的iPad Pro

那么在iPadOS中有个新功能 视窗将可以匹配iPad屏幕尺寸

现在网站可以在较大的iPad上 使用全部空间 对于较小的iPad 我们将调整网站使其适应 屏幕上的一切并调整文本大小 使阅读变得更舒适 就跟iPhone一样

你可以一眼就看到更多网站内容 就跟台式电脑一样 用起来更简便了

有些电脑版网站 是为鼠标输入而设计的

在iOS 13中有个新功能 iPad优化了触摸输入 对鼠标输入的适应性 因此类似这种使用鼠标悬停的网站 现在立即就可以使用了

对于想要完全控制的网页app 现在可以使用指针事件了

这只是你可以在网页app中利用的 iPadOS中众多新网络API 和功能之中的一点

稍后Beth将会 与大家分享更多功能

这些都将打造一种你在iPad上 所期待拥有的强大的浏览体验 那么这就是iPadOS中的 桌面级浏览

现在…

现在我们想分享app和网站如何 最大限度地利用这些新功能 对于app开发人员 我们将分享如何在app中 使用桌面级浏览 对于网页开发人员 我们将分享如何让你的网站 在iPad上更好地工作

让我们从app开始讲

app使用网页浏览有四种常见方式 根据链接浏览网页内容 在app内浏览 网页浏览器 在这里浏览是app的主要重点 混合型app 在这里网络技术 是app的用户界面的一部分 并通过第三方服务 使用OAuth对用户进行验证

首先 链接引导

打开链接并停留在 app内的最佳方式 是使用Safari视图控制器 跟Safari一样 Safari视图控制器功能很棒 包括自动填充和阅读器 因此我很高兴地宣布 若你正使用Safari视图控制器 那么你将免费获得桌面级浏览体验 你不需要做任何事

Safari和 Safari视图控制器 将自动选择一种浏览模式 根据你的情况提供一种最佳体验

让我来解释一下

iPad是浏览因特网的完美设备 就像把网页握在手心里的感觉 根据你正在做的事情 可以用多种不同方式使用iPad

比如有些电脑版网站 在iPad Mini上看起来很小

但在移动浏览体验中 拥有更加舒适的阅读体验

当你在较窄的分屏浏览 或侧拉中浏览电脑版网站时也一样

在这些窄窗口的情况中 iPad Mini移动浏览较好

Safari和 Safari视图控制器将自动选择 一种浏览模式 为你提供最佳体验

Safari视图控制器将为你处理 在你的app内打开链接 所需要处理的一切事物 如果你的app是一个网页浏览器 会怎么样呢？ 你需要做这些 首先通过iOS 13 SDK 创建app转换成桌面级浏览 然后看看如何设置用户代理

如果使用自定义用户代理属性 我们推荐使 用WKWebView配置 applicationNameForUserAgent属性 当你提供app名称时 WebKit将为你填充 用户代理的其余信息

WKWebView也是一个新 WKWebpagePreferences API 用于设置优选内容浏览模式

共有三种模式：推荐模式 与Safari的功能一样、 移动模式以及电脑模式 在绝大多数情况中都可以使用 Safari推荐模式

你的网页浏览器也希望让用户 在移动和电脑模式中切换 或根据不同网站设置不同偏好

对于这些情况 WebKit有个新 WKNavigationDelegate API

在导航时指定一种优选内容模式

Wenson稍后会做一个演示 可以让你们了解这些新API

除了网页浏览器 还可以使用网络技术 创建app的部分内容 或用户界面

如果你的app以这种方式 使用WKWebView 通过iOS 13 SDK 创建app 从而开启桌面级浏览

然后测试app 对WKWebView的使用

在绝大多数情况中 你已经完成了 但还有一些罕见情况 你需要退出视窗尺寸 你可以把优选内容模式设置为移动版

总的来说非常简单 WKWebView 会替你做绝大部分工作

最后… 哎呦 最后 网页浏览 通过第三方服务使用 OAuth验证用户 如果你正在这样做 ASWebAuthenticationSession 是一种最佳的验证方式

在iPadOS中有个新功能 ASWebAuthenticationSession 在iPad上呈现一个格式表 显示验证界面 同时仍会停留在app的情境中 考虑到这个新呈现 ASWebAuthenticationSession 使用移动内容模式加载网站 与Safari视图控制器一样 如果你使用这个API 你不需要做任何工作

总的来说 Safari视图控制器 和ASWebAuthenticationSession 将替你做大部分繁冗的工作

并且如果使用WKWebView 你将获得你所需要的全部工具

现在我想邀请Wenson上台来 给大家做一个演示 Wenson

谢谢Charles

那么我的工作是开发网页浏览器 当我不忙时 我有时喜欢转移注意力 写更多的网页浏览器 那么今天我要介绍 Shiny Browser

它是我写的一个 基于WKWebView的浏览器 它在Google Docs上

那么有时我需要 通过Google Docs 与朋友们合作 为此我希望能使用我的浏览器 但正如你在这里所看到的 它只是告诉我要下载app 我打赌如果我请求这个网站的桌面版 它会为我提供全部功能 因为我刚刚从 Charles那儿了解到 iOS 13中的 WKWebView 在我的iPad Pro上 应该默认请求电脑版 因此我要根据iOS 13 SDK 重新编译我的浏览器 那应该为我提供电脑版网站 那么我要切换到Xcode 我只需要点击运行 Command-R 那会编译我的app 然后我们将会看到电脑版网站

好的 很好 很遗憾 我们仍然是移动版 让我看看我们是否可以 一起尝试调试一下 现在让我们退一步 Google Docs 认为我是个移动浏览器 很可能是使用了用户代理字符串 做出了那个决策

我要做的就是使用网页检测器 连接网页浏览 并打印出用户代理字符串 也许那会暗示我哪里出错了 那么现在我要…

启动Safari 进入开发菜单… 并在这里嵌入 Shiny Browser

我要切换到控制台标签 我只需键入navigator.userAgent 并按回车即可

让我们具体看看这个用户代理

在这里我想指出一些很有意思的事 首先iPad这个词出现在了 用户代理字符串中 那么很明显它不是电脑版 但更重要的是 这个是Version/1.0 ShinyBrowser/1.0 似乎有点不可思议 它是从哪儿来的？

嗯 我自己也想知道 因此我要在 复制并粘贴到Xcode的搜索字段 因此我要使用Command-F 来发现和粘贴

好的 事实证明 有代码覆盖了整个用户代理字符串 使用了WKWebView的 自定义用户代理属性

我肯定是在某个点上从因特网中 复制并粘贴了这个信息 然后就忘记了 也许在当时是一个合理的方案 但我刚从Charles那儿了解到 一个可替换的方案 我还可以在 WKWebView配置上 使用app名称作为用户代理属性 那么让我来修改一下 我要做的第一件事是 移除这个自定义用户代理代码 然后向上来到创建网页浏览的地方

那么在这里我要…

首先创建WKWebView配置 然后为用户代理设置app名称… 无论什么都可以 Version/1.0 ShinyBrowser/1.0 最后我要使用这个配置 创建我的网页浏览 这是一个很小的调整 我要重新编译我的app 并查看我这次得到了什么

好的 如你所见 我们现有 完整版的Google Docs 并且我终于可以与朋友们合作了 非常简单 但现在让我们更进一步 有一段时间我的用户们 曾请求的一个功能是 能在电脑版 和移动版之前切换网页 通过iOS 13中的新API 现在实施起来很简单了 那么让我来告诉你该如何做 首先请注意右上角这个按钮 包含一些附加选项 比如添加到收藏夹和分享 我要做的就是添加一个第三选项 允许用户变更内容模式 要么就是请求移动版网站 要么就是请求电脑版网站

好的 让我们进入Xcode并实施

我要在这里… 添加这个帮助功能 它会呈现一个 UIAlertActions列表 目前 正如你所看到的 我已拥有添加到收藏夹和分享功能 我要做的就是在这里添加第三个操作 但在此之前 我要做一个新的帮助功能

它会帮助我创建 UIAlertAction 当然了 我只会在这里使用它

好的 那将会让我获得我的操作 现在我想让你们关注一下 这个currentContentMode实体变量 我要在这里做什么？ 嗯 我要检查当前内容模式 是否等于电脑版 并且如果它等于电脑版 我希望字符串是“请求移动版网站” 反过来也一样

好的 那应该解决了 但问题是 “我们如何持续追踪 currentContentMode？” 我们如何了解它是什么模式？ 嗯 我要向下滚动到这里 我在这里实施了我的 WKNavigation委托 叫做didCommit导航方法 我要在这里做的就是 使用iOS 13中的一个新API 那么在iOS 13中 WKNavigation 拥有一个叫做 effectiveContentMode的新属性 永远只有两个选项 移动版或电脑版 这对于我的用例来说非常完美 我能做的就是设置 currentContentMode 使其等于导航的有效内容模式 当我提交导航时 那应该会帮助我持续追踪 当前正在加载的内容

那么现在我应该显示了正确的字符串

但我希望你们关注一下 这个操作处理器

我们仍然需要一种方式来表述 “让我们针对指定主机名称 优先加载移动版或电脑版内容” 为此我们把主机名称词典 保存到内容模式中 要么是移动版 要么是电脑版 而无论用户正在触碰什么

我现在要实施操作可处理器

我要做的只是获取主机名称 并把它设置到移动版 或电脑版的词典中 然后我要告诉网页浏览器重新加载 好的 这就是 contentModeToRequestForHost词典 当然 我们还要在其它地方使用它 因此我要向下滚动回到我的导航委托 我要添加一个新方法

我要实施 为navigationAction确定决策 这与你可能熟悉的版本非常相似 除了在iOS 13中这个版本 包含网页优选作为参数 就是这个优选 那么对于这些优选我能做的就是 把优选内容模式设置为 我从词典中所查询到的内容模式 仅仅作为刷新工具 这个contentModeToRequestForHost 词典 与我刚刚在操作处理器中

所填充的那个一样 好的 最后但并不是最不重要的 我们要记得调用有这些新优选选项的 decisionHandler 然后就完成了 那么我要重新编译我的app 让我们看看我们的功能怎么样

这次我也要进行切换 这次我不进Google Docs 让我们进入一个图库

这是Shiny Pics的电脑版 我要做的是使用附加菜单 请求移动版网站

移动版网站看起来是这样的 Shiny Pics的移动版 我的意思是我可以指出 它是网站的移动版 因为它看起来真的很像是针对手机 进行了优化的页面 而并没有针对iPad Pro 做这么多优化 我认为在iPad Pro上 我实际上倾向于使用 Shiny Pics的电脑版 因此我只需要轻触 请求电脑版网站即可 然后我就会返回到 Shiny Pics的电脑版 好的 总的来说 我首先确保我的浏览器可以加载 电脑版内容 然后我使用了新API 来实施请求移动版或电脑版网站功能 但目前我们仅向 app开发人员展示了一些新工具 当然 对于网页开发人员来说 也有新功能 为此我要邀请Beth上台来

谢谢Wenson 非常棒

那么这些对于网页开发人员来说 意味着什么？ 如果你有一个响应式网站 看起来很可能一样 但我们的确有一些新工具可以用于 维护并改善你的响应式网站

我还要分享一些关于 iPad上网页开发的最佳范例 因此无论你的网站是当前响应式网站 或是针对台式电脑设计的大屏幕网站 你都可以使它在iPad上 拥有非常棒的体验

我要讨论六个新功能 其中有些是纯开发功能 比如指针事件 而有些更像是新终端用户功能 但拥有开发暗示 比如加快滚动

让我们从指针事件开始讲

在iPad上加载电脑版内容的 其中一个大问题 就是调解鼠标和触摸输入

有时候网站是写定的 因此小屏幕版本 只使用触摸事件 而大屏幕版本只使用鼠标事件 我们的目标是在iPad上 尽可能地保持网站仅使用鼠标事件 当然即使没有鼠标 那么当用户轻触时 WebKit将发送 按下鼠标、松开鼠标 和点击事件 就跟以往一样 那时也会发送鼠标悬停事件 稍后我会具体讲一下

然而鼠标移动实际上 对于iPad来说毫无意义 最接近的类似情况是 在屏幕上移动你的手指 但这是你的滚动方式 因此我们的确尝试了 在发送触摸移动的同时 发送鼠标移动事件 但实际上导致了更多的问题 因此我们决定不这样做 它和滚动相冲突 如果你需要诸如鼠标移动这样的事件 那么我们有一个很棒的方案 就是指针事件

我们在iOS 13和macOS Catalina中的 WebKit中添加了对指针事件的支持 它是一个网页标准 提供用户输入和你的网站之间的 一个抽象层 因此可以用同一个API 处理鼠标输入、 触摸输入或手写输入

指针事件的使用很简单 如果你的现有代码 支持电脑版的鼠标事件 就像这样 让代码支持指针事件很相似 只有事件名称不一样 但让我们把情境扩展一下 让我演示一下我具体是如何使用它的 我实际上使用特征检测 来决定是否支持指针事件 我将保留鼠标事件监测器 以便适应老年客户们 只有当指针事件不可用时

PointerEvent对象 实际上继承自鼠标事件 因此我基本不需要修改关于 updateInteraction函数的任何东西 直接就能用 除非我想利用 PointerEvent上的附加参数 指定鼠标或手写输入 那非常庞大 采用指针事件就是如此简单

指针事件 可以与鼠标事件和触摸事件并存 但请注意当混合事件输入时 将映像到同一个用户操作 比如这个 没有else子句 因此会注册全部两个事件 并且我的函数将被调用两次 每次指针移动时都会被调用 那可能会让情况变得一团糟

同时你不需要注册全部三种事件类型 如果你想在既支持鼠标 又支持触摸的设备上 区分鼠标和触摸交互 因为指针事件允许你了解其中的不同

如果你想取消默认网页浏览器行为 比如滚动 那么在Mac上你将使用 preventDefault 就像你针对鼠标事件所做的一样

在iOS上preventDefault 并不会锁定全部浏览器行为 因此你应该也会用到 触摸操作CSS属性 触摸操作实际上非常棒 它比写JavaScript要简单 它可以让你做出 比preventDefault更多的细致决策 现在我要用它阻止 所有值为none的浏览器行为 但我可以用它来 比如说 阻止滚动 但仍允许缩放 触摸操作也可以实现 更有效的用户交互 因为它是陈述性的 因此在你的网站上 使用触摸操作和指针事件 可能会改善你网站的性能

那么我们有兼容性鼠标事件 来保持电脑版能正常运行 但这对于iOS来说只是权宜之计 方案是指针事件 它们的使用非常简单 它们可以让你实现你当前通过鼠标 或触摸事件所能实现的一切功能 并且它们会确保快速地响应用户交互 这对于我们所面临的 调解鼠标和触摸输入 相关的所有问题都是一个很棒的方案

正如我所提到的那样 WebKit也会为了兼容性而发送 鼠标悬停事件 悬停对于触摸屏幕来说很棘手 因为硬件根本就不支持它 我们在iOS 13中修改了 鼠标悬停的检测方式 保证依赖于它的电脑版网站 能正常运行

如果你在网页上轻触一个元素 悬停的响应将实施悬停 并且如果网页中发生了有意义的变更 那么作为悬停的结果将会停在那里

用户可以第二次轻触 如果他们想要点击的话

在iOS 13中 WebKit会检测出 更多有意义的变更 这对于许多依赖于悬停作为网页 必不可少的要素的许多电脑版网站 来说至关重要 就像这个网页 它在菜单中使用了悬停

我们发现它用起来很好 但它从根本上来说是一种启发 浏览器引擎尝试诠释设计意图 因此它并不总是那么完美 我们要记住一些最佳范例 当你使用悬停时

首先你应该总是提供另一种方式 来获取有意义的内容 只是为了防止 WebKit漏掉某些东西 这对于可接入性来说也很重要 Wenson稍后会在演示中 具体介绍

你还应该避免强迫用户轻触两次 在绝大多数常见的交互中 请记住如果WebKit检测到 悬停时发生了有意义的变更 那意味着用户必须轻触第二次 如果他们实际上想要点击的话 因此如果你网页上有一个元素 你认为 用户可能会更频繁地实施点击 而不是浏览悬停内容或与之交互 那么考虑做一些修改来避免 两次轻触的减速障碍 这个障碍是你在可点击的元素上 使用悬停所遇到的

谈到效率 让悬停保持速度 如果你在针对悬停的响应中 开启了计时器 WebKit将等待 这些计时器被触发 如果在网页上添加 有意义的内容延迟的话 最糟糕的情况是 有东西启动了计时器 但是并没有发生任何有意义的变更 那么WebKit将自动实施点击 但同时 比平时的等待时间长大约几百毫秒 并且用户会觉得轻触非常慢

我们相信我们在iOS上 针对鼠标悬停检测 已经比以前做得好多了 但我们仍建议你使用它 只是为了逐渐增强 并确保你的网站正常运行 即便没有悬停

iOS上的WebKit 以前总是让主框架硬件加速滚动 但我要很高兴地宣布 WebKit现在已经在任何地方 都能实现硬件加速滚动了 意思是子框架及滚动区域 现在也可以像黄油一样 流畅地快速滚动了 就像主框架一样

就是那样 甚至是子框架也可以 在iOS的老版本中 WebKit会强迫子框架 尺寸是内容的完全尺寸 因此它们实际上不需要单独滚动 而且结果可能比你在代码中 所定义的尺寸更大 现在在iPad上 你可以指定框架的尺寸 并且它们也可以进行滚动 就像电脑浏览器上那样

这是如此常见的一个功能 有两种很流行的实现方式 WebKit默认不支持它 首先我们添加一个CSS property -webkit-overflow-scrolling: touch 开发人员们可以选择 当需要快速滚动时 我们永远不会把它设为默认 因为它会创建一个CSS堆栈情境 那会影响你网页上从前到后的元素层 第二 有些人创建或使用 JavaScript库 那会使用触摸事件来模拟快速滚动 现在不需要那些技巧了 事实上WebKit流程滚动触摸 在iPad上是无操作的

因此你应该测试硬件加速滚动 如何在各个方面影响你的内容 并且如果你以前使用了 缺乏这个功能的技术 你可能再也不需要它了

接下来我想谈谈新的自动化视窗 以及文本尺寸调整行为

我们开发了新的自动化行为 因为网页应该在iPad上 呈现清晰易读的文本 （网页应该呈现清晰易读的文本） 具体地说 不是专门针对iPad创建的网站 应该在iPad上正常显示 意思就是它们不应该水平滚动 除非它们就是那样设计的

并且对于绝大多数人来说 全部文本都应该清晰易读 而不需要额外缩放

我们需要自动化行为来实现这些目标 因为有些电脑版网站 有固定的宽度 而那个宽度比iPad宽

我们发现很多网站宽度非常大 比如这个 同时视窗元标签中 响应性的声明也不正确 这很遗憾 让我返回去并解释一下 我要表达的意思

最初创建视窗元标签是为了 处理为电脑版网站创建的内容 在小屏幕上显示时所导致的问题 那么它可以很完美地处理 不是吗？ 嗯 这个特殊的视窗值 意味着对浏览器引擎的一个承诺 承诺网站的设计是响应式的 意思是它将随着窗口尺寸的变更 进行自适应重排 在iOS之前的版本中 我们一般会从表面上获取这个承诺 并且我们不会应用 任何自动化视窗调整 在宽度的元标签等于设备宽度 并且初始缩放比等于1的网站上

但那会导致在iPad上浏览 许多电脑版网站的体验很不好 这个网站应该可以自适应 但它却没有 因此在iPadOS上有个新功能…

WebKit将忽略元标签 如果它承诺是响应式的 但那实际上会设置一个 比设备宽的宽度 我们发现那会打造一个 更好的整体体验

如果你的网站设计是水平滚动 并且它的缩放比例不对 你可以很轻松地解决它了 你只需要在你的视窗元标签中 添加另一个值 shrink-to-fit=no 这不是一个新值 我们在iOS 9中添加了这个值 因为我们在网站的分屏显示 或侧拉显示时遇到了同样的问题 shrink-to-fit=no 将阻止网站在分屏或侧拉时自动缩小 也防止较宽的电脑版网站自动缩小

你可能已经注意到了 即使这个网站上的框 缩小了以适应视窗 标题中的文本实际上却变大了 那是因为我们将自动调整网页上 由于采用了这种方式 而被缩小的文本尺寸 以便保证文本清晰易读

如果你想在网站上控制 视窗和文本尺寸 最佳方案就是采用响应式设计 并确保你的内容能自适应 任意窗口尺寸 响应式设计是一个热门话题 因此我不想在这里介绍 因为网上有很多很棒的介绍

总结一下 WebKit 有新视窗和文本尺寸调整行为 那会使网页适应清晰易读的文本 你要控制这个的最佳方式是 采用响应式设计 并且如果你有一个水平滚动的网站 那么你可以通过视窗元标签 来实现正常显示

接下来我想谈谈可视化视窗API

为此我首先要讲一下 可视化视窗和布局视窗的不同点 我们刚刚谈到了 自动化视窗尺寸调整行为 以及视窗元标签 那些是用于定义布局视窗 以及屏幕和窗口尺寸

用户输入或调整分屏显示时 会改变窗口尺寸 响应式网站将对那个变更做出反应 使用媒体查询 或也许是通过重调尺寸事件 和JavaScript 获取媒体查询的最大和最小值 无论何时布局视图发生变更时 并且同时会启动重调尺寸事件 那么如果用户旋转了设备 布局视窗再次发生了变更 并且你的内容会通过 以下技术中的一种对其做出反应

然后是键盘 键盘为我们呈现了一个覆盖层 它并没有改变布局视窗 并且媒体查询和重调尺寸事件 也不会做出反应

因此如果用户轻触了这里的名字字段

就会显示键盘 很显然那影响了屏幕上的可见内容 这是由可视化视窗所定义的 这里的布局视窗是常规的窗口尺寸 并且可视化视窗是当前可见 并且未隐藏的部分 我们很早之前 就听到开发人员们说希望 对可视化视窗中的变更做出反应 在这个示例网页上 比如说 捐款按钮现在是隐藏的 并且网站应该更可用 如果它总是停留在屏幕上的话

在iOS 13中 我们终于解决了这个问题 通过一个W3C标准 可视化视窗API

你可以用这个API监控 可视化视窗的冲调尺寸事件 当键盘出现在屏幕上或隐藏起来时 将触发这个事件 并且Safari中也能触发它 当滚动过程中智能搜索字段隐藏时

现在我可以使捐款按钮保持可见

我们认为可视化视窗API 是一个很棒的工具 可以充分利用iPad的大屏幕

让我们谈谈流媒体 在网页浏览器上提供 优质流媒体内容的用户们 很可能已经知道 最佳方式是HTTP Live Streaming 或简称为HLS

HLS在iPhone、iPad 和Mac上可用 它是一个疑难问题的简便方案 因为它替你分担了全部繁冗的工作 它可以和CDN一起使用 并且你会免费获得一些东西 比如AirPlay整合

然而有些电脑版内容使用了 Media Source Extensions 或简称为MSE MSE是一个可以让视频供应商 精确控制所提供给用户的 数据的API 比如你可以手动提升或降低视频品质 从而响应带宽变更 如果你当前有内容使用了MSE 我有一个好消息给你 iPadOS中MSE在iPad上 的电脑版网站上首次可用

如果你当前的引擎 针对电脑版网站使用了MSE 它在iPad上也没问题 并且如果你使用实施了MSE引擎的 JavaScript库 那也没问题

因为有了HLS和MSE两个选项 流媒体在iPad的Safari中 变得比以前更强大了

这些新功能应该可以帮助你 让你的网站在iPad上自由释放 我刚才谈到了一些最佳范例 但我还有更多范例要分享

最佳范例可以帮助我们具体了解 它们引导了这个平台的转变 但它们也把我们带到了未来 随着平台的成长和发展

首先并且也是最重要的 我们坚信你应该创建一个响应式网站 而不是创建类似的 电脑版和移动版网站

我知道说起来容易做起来难 但我们真的相信 通过这套响应式设计技巧 可以打造出一个完整的网站 并且你应该使用特征检测 而不是用户代理字符串

以前有些开发人员希望了解用户代理 以便明确识别iPad 但我们在iPad上的新 电脑版用户代理将阻止你这样做 我想说服你们不需要再了解 你的内容是否是在iPad上 你只需要使用特征检测就可以了

原因是iPad是个变色龙 通过Charles介绍的 全部新内容模式API 你的网站可以在电脑版模式 或移动版模式的app中显示 你的网页内容可以在分屏中显示 无论是移动端还是电脑端 因此特别了解你的内容 是否是在iPad上显示 就没有那么重要了

并且对于用户代理的困惑 并没有终结在iPad这儿 一切皆有可能 我们现在Mac上运行着 UIKit app

其实如果你返回去… 我们在Apple Watch上、在iPhone上、 在iPad上都有网页内容 并且我们已经覆盖了 各种不同的内容模式和配置 Mac上的网页内容 和UIKit app Mac上AppKit上的网页内容 针对每一种配置 并处理它是大屏幕网站或小屏幕网站 将会更加局限 比使用特征检测了解 哪一种配置可用更脆弱、 更没有前瞻性

我们将站在这里 并告诉你们响应式设计 是一个最佳范例 无论火热的新产品是什么 一年又一年 年复一年 直到最后我们不再需要这样做 因为它已经成为了规范

服务端提交的内容并不知道 是谁发出了请求 但会在每一台设备上 完美地适应响应式设计

并且这个设备的显示区域也没有缩小

我们知道这需要做很多工作 但我们也知道你值得这样做

当我们提到iPad 拥有桌面级浏览时 我们的意思是现代化的桌面级浏览 那意味着没有插件 iOS上从来都没有出现过插件 并且我们现在也不打算添加插件了 即使在Mac上 如果你想尽办法安装Flash 它默认仍是关闭 并且我们将于2020年停止支持它

因此如果你还没有把老旧视频或游戏 或饭店菜单迁移到标准网页技术 现在是时候跟Flash说再见了

iPad上的 Safari是桌面级的 但iPad仍然是一个移动设备 那意味着我们期待能在路上使用它 通常是在公共区域 因此WebKit将阻止 自动播放音频 我们发现有些电脑版网站 会假设将发生自动播放 但最好是不要这样假设 标准的媒体API允许你了解 实际上发生了什么 因为播放功能有一个承诺 你应该捕捉到那个承诺 万一播放被拒绝的话 但你还应该在设计网站时考虑到 以便让所有设备上的所有用户 都能自己决定什么时候播放音频

接下来跳出鼠标和键盘之外 当设计用户交互流程时 特别是要考虑使用指针事件 并避免使用鼠标悬停 除非是装饰性辅助发生了变更

最后使用内嵌API 这是一个很宽泛的话题 但我有一个具体的例子 我们发现许多电脑版网站 都使用鼠标事件 以便自定义文本选择 或文本输入 但有一个更好的工具可以实现 选择变更事件和输入事件 正是为了这个目的而设计的 你总是在每个平台上获得更好的行为 如果你使用了内嵌API 而不是用基础的交互事件 进行逆向编译

那么就是这么多了 为了帮助你们消化全部这些信息 我要邀请Wenson返回舞台 他可以给大家在操作中 演示一些新功能和最佳范例

Wenson

好的 谢谢Beth

那么你永远也不会猜到 但当我不工作时 在我的空闲时间 也没那么空闲 我还喜欢做一些网页app

今天我要跟大家分享一个 我最近一直在做的app 叫做Shiny Sketch

目前我只在电脑浏览器上进行了测试 那么看看它在我的iPad上怎么样 是不是很有意思 但首先让我在Mac上 给你们快速展示一下 在这个过程中 我会指出一些 可能需要调整的潜在区域 从而使它在iPad上看起来更棒 好的 这就是它在macOS上的样子 首先这个网站有一个固定的四栏布局 意思是如果我把窗口变小 我就会获得水平滚动 是吧？ 那么这是需要记住的一点

接下来是为了获取退出或删除控件 我必须在每个会话上进行悬停 当然了 退出和删除控件 对于我的网页app来说至关重要

最后我要进入并尝试 在其中一个绘画上涂鸦

那么我可以使用我的触控板来绘画 但我当前的代码使用了…来实施 仅获取鼠标事件 我很可能需要针对iPad 调整它的兼容性

好的 这是在Mac上 那么在iPad上看起来怎么样呢？ 让我来展示一下

我恰好在Safari中 打开了同一个页面

并且我注意到的第一件事就是 四栏布局 在横向模式中看起来很棒 然而一旦我旋转到竖向模式 让我们看看会发生什么

那么我仍然是四栏布局

我打赌如果网站时响应式的 我就可以避免这种缩放

我现在要做的就是返回到Mac上 并查看我是否可以解决这个问题 是什么触发了我浏览器中的水平滚动

好的 那么先说重要的 我要重新调整窗口 从而我可以得到水平滚动 就像这样 然后我要进入开发菜单

那么我要向下进入起始元素选择

那可以让我了解每个元素有多大 举个例子 在这里 这个编辑按钮是72乘48像素

好的 那么我要从页面顶部开始 并尝试找到一个很宽的元素

Shiny Sketch页面条幅 或标题是大概760像素 如果我使用这个标尺来查看 窗口宽度自身

它也得是760像素 那么这看起来比例很不错

我要向下移动游标

并且…你可能已经猜到了 图库部分是1300像素 超级大 因此我很确信就是它触发了水平滚动 在我的网页app中 但我想了解更多信息 因此我只需要点击 那会打开网络检测器 我可以了解关于图库的更多信息

那么在样式侧边栏中 却是有一个硬编码的1300像素 这里为什么有这个？ 嗯 当我添加这个时 我认为我在尝试让网站在很大、 很宽的显示屏上看起来不错 我认为不会有人 在小于1300像素宽度的显示屏上 加载我的网页

也许当时我的假设很合理 但现在我认为我可以做得更好 因此我现在要做的就是… 转换并尝试修复它 我要让我的网站变成响应式网站 顺便说一下 整个网页app只有三个文件 一个HTML文件、一个CSS文件 和一个JavaScript文件 我要从HTML文件开始 我要添加一个元视窗标签

那么有两个重点 width=device-width 和initial-scale=1.0 这就告诉浏览器 页面可以响应任意设备宽度 因此这很重要 但现在让我们实际上把它变成 可以响应任意设备宽度 因此让我们打开CSS文件 请记住我们之前看到的那个 1300像素规则 我要搜索一下

开始吧 width: 1300px 它的确在图库上 我要做的就是把它修改成最大宽度 那意味着如果窗口小于1300像素 图库中的绘画就应该重新排列 它们可以进行重排 因为我很方便地把它们设置为 display: inline-block 好的 那么…

那是一些小修改 让我们看看它现在怎么样了

好的 它在竖向模式中 变成了三栏布局 但如果我旋转到横向模式

它变成了四栏 这是因为横向模式足够宽 能适应四栏布局

无论怎样 再也不用按比例缩放了 很棒 好的 那么接下来让我们谈谈绘画 正如Beth所提到的那样 在iPad上没有鼠标移动 但幸运的是我可以采用指针事件 以及触摸操作CSS属性来实现

那么让我们返回到CSS文件

在这里我要添加 Touch-action None

或更具体一些 我要把它添加到 .drawable-canvas 正如它的名字所暗示的那样 它是我在绘画时拖动手指的元素 当然 重点是当我拖动手指时 它不会滚动 这就是为什么 触摸操作非常重要的原因 好的 接下来我要打开 JavaScript文件 我要查找mousemove

好的 那么这就是我目前用于 监测鼠标事件的代码 因此我可以在Mac上绘画

我要稍微调整一下

那么取而代之 我要…

检查是否支持指针事件 如果支持 我要注册指针事件监测器取而代之

否则我就要退回到 我目前正在使用的鼠标事件

好的 让我们实际看一下这些变更

让我们给我们的狗狗朋友Sona 画一顶帽子

嗯 画得并不好 但正如你所看到的那样 我现在很明显已经能绘画了

好的 那么最后一个小细节

正如Beth所提到的那样 iPad兼容鼠标悬停 但我并没有立刻就知道 编辑或删除或绘画的方法是 首先轻触每一幅绘画 以便显示控件

然后轻触那些控件 这意味着在iPad上 我的app中的任何有意义的交互 都需要两次轻触

让我们把它变成 一次轻触即可编辑和删除 我要做的是添加一个 总是可见的删除按钮 并使轻触绘画即可立即进入 编辑模式

那么让我们来做一下

首先我要打开HTML文件 我要添加一些标记

它是一个很简单的按钮 我要把它添加在这里 但请注意我在这里放了一个 类静态控件 很快它就会变得很重要了 因为我要打开CSS文件了…

我会在那里添加一个媒体查询

因此我在这里要 通过这个媒体查询查看是否支持悬停 并且如果支持 我们就不再需要那个静态控件了 就是我刚刚添加的那个 静态的删除按钮 因此我可以给它设置 display: none 然后应该会隐藏它

最后我们需在JavaScript 文件中做一个小修改

那么现在我要查找 mouseenter

并且这是我用于显示或隐藏 悬停控件的代码 当用户的鼠标 进入或离开每一幅绘画时 如果不支持悬停 我们就不需要这样做 那么我要做的就是 在这里添加一些逻辑 可以使用我在CSS文件中 所使用的同一个媒体查询 来查看是否存在悬停 并且如果不支持悬停 我就得针对 drawingitself 采用点击事件监测器来取而代之 并允许它立即开启绘画模式

然后这个提前返回 确保我不会添加 我不需要的事件监测器…

如果不支持悬停的话

好的 我们做了许多变更 但现在让我们实际看一下

好的 首先我注意到的是删除按钮 现在总是可见 并且随时准备被轻触

但如果我轻触任意一副绘画

我将可以立即编辑它们

那么在我的app中 轻触一次就可以实现任何功能

好的 那么通过一些简单的步骤 我就让我的电脑版网页app 在iPad上用起来很棒 并且我认为 你们中的网页开发人员们也一样可以

现在我想把舞台 交还给Charles 他会总结一下我们今天所讲的内容 我会在实验室等你们

谢谢Wenson 你的网页app看起来很棒

总结一下… iPad做出了一些重要的新改进 让如今的电脑版网站 在iPad上用起来很棒

我们希望你们充分利用这些新功能 让你的app或网站 在iPad上变得更好 就像你曾经为 iPhone所做的那样

对于我们的网页开发人员来说 考虑创建一个响应式网站 通过我们今天所讲到的技术

对于app开发人员来说 可以让Safari视图控制器 和ASWebAuthenticationSession 替你分担繁冗的工作

如果使用WKWebView 请测试你的app

并且请提出错误并把你们的反馈 发送给我们 我们希望听到你们的反馈

要获取其它关于验证 和网络平台功能的更多信息 你应当看一下演讲504 验证、Safari和WebKit中的 新功能 时间是周四上午11点 还有两场与演讲相关的实验室 时间是今天下午1点 和周四中午12点 希望大家积极参与并了解 更多相关内容

谢谢大家 希望大家度过一个精彩的WWDC