Safari 浏览器视图控制器简介

《Safari View Controller之简介》

大家下午好 欢迎各位 在我们开始讲座前 我想对大家有一个了解 你们通过举手方式回答 如果你们有苹果公司 App商店正在上架的app 请举手

你们很多人都有 欢迎 你们来对了地方 那就是WWDC 在你们中有多少人刚开始 学习如何写iOS Mac 或苹果手表app？

你们中有一些是 同样也欢迎你们 在你们已经创建或 正考虑创建的所有app中 有多少是专用网络浏览器

好的 你们有一些 人数不那么多

你们中有多少人在你们的应用中 包含一个小型网络浏览器 每当用户点击时就显示 哦 你们都举手了 好了 我是Ricky Mondello Safari和WebKit团队的 一名工程师 我接下来半小时的目标是 让你们中间所有 以编写小型网络浏览器 为业务的人破产

我将给你们展示 如何使用Safari 或新的Safari视图控件 使你们有更多时间关注 对你们的app 有特殊意义的部分 并为你们的用户提供 已经喜欢的Safari特性 大家准备好 我们开讲了

这个话题的中心是网络内容 网络内容有很多 分为不同的形态和大小 但在今天的讨论中 我将把它大致归为两类

第一类内容是在你们的app中 用HTML JavaScript和CSS书写 你们拥有这些内容 或你们将特别介绍这些内容 重要的是 它看起来 并不像传统网络浏览器上的内容 它不是用户浏览网站时 看到的内容

我们看第二种情况

当一个用户点击了 你们app中的一个链接 你们想给他们展示一个 类似Safari的视图 这样他们可以做一些短暂的浏览

这次讲座主要关注 第二种使用情况 我们将看到Safari和 Safari视图控件 如何为你们的应用 增加已经过多年验证的功能 并改进你们的应用

但是在我们开始展示前 我想快速说明另一个使用情况 如果你们正在你们的app中 以一种不像传统网络浏览器的方式 使用网络内容 你们可能正在使用 WKWebView 或UIWebView 但WKWebView是首选工具 它是你们的朋友

它是在iOS 8和 OS X Yosemite中推出的 基本上它只是一个 网络内容周围的矩形

你们把一个页面加载到它里面 你们可以评估JavaScript 并且在当前页面上 得到一个JavaScript 评估结果 你们可以修改导航或 彻底阻止它们 是否增加你们自己的用户界面 后退 前进按钮 交流进展等等 取决于你们自己

在iOS 9和 OS X El Capitan 我们收到了你们的最新反馈 我们已经包含了一些 WKWebView 以前缺少的片段

首要的是 你们现在能够 安全地加载很多FileURL

你们同样可以加载数据 例如你们过去想用这种 方式加载的文本格式HTML字符串 你们不需要起转服务器

你们可以选择设置你们自己的 自定义用户代理字符串

我们已经增加了一个新的API 用于处理网页储存的数据 如cookies缓存和其它数据 这就是WK网站数据存储 (WKWebsiteDataStore)

在您的网络视图中的 WKWebViewConfiguration中 它具有可读或写属性 使用这个数据存储 你们可以根据类型删除数据 或者你们可以删除... 前一小时添加的所有的数据 这很棒

因为这个属性 你们配置中的存储是可写的 你们可以 用一个非永久性配置替换它 你们也会在实现私密浏览方面 去这么做

对于你们app中你们自己的 自己控制 自定义的网络内容 WKWebView是能胜任的工具 在iOS 9 和OS X El Capitan中 我们给你们提供了 更灵活的选择

如果你们在想：

我不需要 那样灵活的选择 我不想在页面上 评估JavaScript 我不需要修改导航 我不想接通我自己的 后退和前进按钮 那么接下来的讲座 就是为你们准备的

我们会谈论 你们怎样使用Safari 或者Safari视图控件 以便让你们的用户得到 更好的体验 你们写的代码也更少 你们第一个选择是 索性把展示网络内容的责任 交给Safari本身 这是极其容易做到的 只需调用UIApplications openURL方法 iOS会从你们的app 切换到Safari

iOS 9的一个新特性 你们昨天看到的 是系统预设用途 就是回到上一个app的能力 使这它成为比以往更好的选择 它比iOS 8更轻便

把展示网页内容的责任 委派给Safari 确保了 用户在使用网页内容时 得到一级体验 那就是Safari所能做到的

如果你们想保持 你们app目前的体验 用户甚至对您的app难舍难分 你们会对Safari视图控件 感兴趣

让我们我们看一下

这是来自于apple.com网页的 Safari视图控件 网页内容经过了灰色处理

你们可能最先注意到 Safari视图控件 很像Safari 却又刻意有一些不同

Safari视图控件的职责是 让用户能够更轻松更愉悦地 在你们的app中点击链接 浏览网页 以及点击“完成” 并返回你们的app

Safari视图控件 消除了让人分心的东西 你们在上方看到的 那个URL区域是只读的 你们不能更改它 而且只有这一页 没有其他选项卡 来分散用户的注意力

以Safari名义 Safari视图控件带来了 你们的用户 本已喜欢的Safari功能 但现在... 它们在你们的app中 让我们开始 首先最重要的是... Safari视图控件 与Safari和其它 网站数据分享cookies

这意味着如果你们的某个用户 已经用Safari 登录到一个网站 若他们点击您的app中的 一个链接 这时Safari视图控件出现 他们可能仍然处于登录状态

但如果他们还没有登录 那种情况我们也想到了

因为Safari视图控件 允许你们使用密码自动填充 填充用户所有通过苹果 iCloud Keychain机制 在用户的所有设备上 同步的任何密码

但是在我们继续讲座前 很有必要指出 这对你们的用户是完全安全的 安全的原因是 我们为你们的用户 提供访问他们的 证书 用户名 密码的权限 但是没有给宿主app 访问这些数据的权限

实际上 Safari视图控件 与你们的应用程序 运行在不同的进程中 这使你们绝对免受责任的约束 不必考虑这种 重要而敏感的用户数据 责任是我们的 好了 让我们回到特性的话题

如果用户想让货品 发到他们的住所 或他们的工作地址 他们将可以使用接触卡自动填充 像使用Safari一样填写信息

在购物的时候 他们同样能够 填写他们的信用卡

如果你们的某位用户 遇到一篇... 有趣... 引人入胜... 但难以读懂的文章 她将可以使用 Safari读者按钮 以获得一个相关内容的 简化清晰版本 这太好了

当然Safari和 Safari视图控件中的iOS 9 共有的新特性是阅读器可定制 提供很多可供选择的主题和字体 网络阅读变得前所未有的容易 你们和客户可以 完全按照自己想要的方式阅读

从分享按钮那里 你们会找到自己期待的东西

你们会发现遍布于系统内的 向社交网络分享的选项 你们也将发现 可以添加到个人阅读清单 但是你们能发现的不止这些 因为除了这些功能外 你们的app 也专为Safari视图控件 提供一些功能

如果你们的app 是一个社交网络 你们可以在分享页设专用按钮 以便将当前网页分享到社交网络 真是太酷了

Safari视图控件在定制方面

会尊重你们的app设定的 自定义颜色 本例中幻灯片上的颜色 从Safari默认蓝色变为橙色 它是用户使用 Safari视图控件时 了解使用的 是何种app的给力方法

下一个特性很震撼 它是iOS 9的全新特性

内容屏蔽功能

请继续

内容屏蔽功能的大概思路是 这能够通过拿走一些内容 以改进浏览网页的体验 在iOS 9中 当用户浏览网页时 任何app都可以对 Safari和Safari视图控件 应该屏蔽的网页内容进行描述 让我们看一个示例

这儿有一个 有很酷内容的网页 但是我不喜欢侧边栏内的 所有那些诱惑点击的标题 如果你们设置了 合适的内容屏蔽条件 你们将不会相信 接下来发生的事情

你们会的 那些我不喜欢的内容消失了

但那还不是全部 内容屏蔽的功能不止这些 内容屏蔽功能可以做的事情 远不止隐藏网页上的元素 你们可以彻底阻止加载 阻止你们实际并不感兴趣的 来自于第三方域的... 所有影像或脚本 用户在设置中打开的 所有内容屏蔽条件 将同时适用于Safari 和Safari视图控件

这意味着你们 从使用小型网络浏览器切换到使用 Safari视图控件后 你们将不会收到任何关于用户的 广告屏蔽器不起作用的投诉 这太酷了

那真是很多有用的功能 接下来我们讲讲安全

我刚才提到Safari视图控件 与你们的app运行在 不同的进程中 这为你们免去了很多责任束缚 不必为重要的用户数据承担责任

但是在浏览网络内容时 有一个能够给用户提供安全的 表达接口同样重要 Safari视图控件能在这方面 做与Safari同样的工作

最重要的... 是安全网页 Safari视图控件 像Safari一样 把SSL的有效性告知用户

假如用户遇到糟糕的一天 他们碰到一个网络仿冒网页 Safari视图控件会 跟Safari一样警告他们 让他们回头 总的来说 Safari视图控件 具有Safari的所有给力特性 它具有你们用户已经喜欢的特性 像密码填充 具有cookies共享功能 用Safari Reader 轻松阅读文章 以及iOS 9中的 内容屏蔽功能

它还具有一些小功能 像当进程正在加载一个好看的 进度条时 正确告知进度的功能

以及加载时如果出现错误 显示错误页面信息的功能 你们的小型网络浏览器 能或不能做到所有这些 但使用Safari视图控件 便不需要了 由于增加了... 经多年验证多年的Safari特性 能够做这些 并优化你们的app 为你们的app做很多年的优化

我很高兴的说使用 Safari视图控件确实很容易

让我们看看API

在代码方面 Safari视图控件 被称为 SFSafariViewController 它是Safari服务框架的一部分 你们可能猜到它是 UIViewController 控制器的一个子集

我马上会讲到它有一个 Delegate变量 以及一个初始值(initializer) 它需要一个URL 这是你们的用户点击的网页URL 你们想展示的网页

让我们快速地看一下 delegate

在delegate方面的 第一个方法是 当用户点击分享按钮时 如何把你们自己的自定义活动 提供给分享页

delegate方法二是 在当用户完成浏览 点击做“完成”按钮时被调用的 当为了搁置视图控件时 你们会想执行这个方法

总的来说 这是一个非常简单的API 为展示这个简单的API有多强大 以及它将为你们的app 省去多少行代码 接下来我高兴地请上 我的同事Yongjun 到台上为大家做演示 你好Yongjun

谢谢你瑞奇

大家好 我是Yongjun 我是Safari 和WebKit工程师

欢迎来到这个环节 我不了解你们但今天 我非常想吃些披萨

我在写一个寻找 我附近披萨店的app

这就是它 我称它为“披萨发现者” 我有一个披萨店列表 选择第一个店铺 我得到电话号码 地址和店铺网站的链接

我的任务是使我的app 显示这个网站 使我可以了解店铺的更多信息

像瑞奇提到的 我们有三个选择 第一个选择 用openURL 让Safari为我们打开网站

选择二 是你们建立一个网络视图 建立我们自己的浏览app 选择三 使用Safari视图控件 我先为大家演示选择一

我转到我的Xcode项目

在我的店铺视图控件里 我有个函数 是showStoreWebsite （展示店铺网站）

我只需要拽一行代码 UIApplication openURL 这会使Safari打开这个URL 让我们测试一下它

运行此app

选中第一家店铺 点击鼠标左键 现在Safari为我打开了 这个网站 可以看到网页上有一个阅读器

如果我试图订披萨

我的用户名密码会自动填入 我以前应该来过这个网站 可能我订过披萨

现在我使用Safari 我希望用户始终黏在我的app上 不希望他们切换到Safari 只为了访问一两个网站 这会使他们分心 而且或许以后也不会 回到我的app了

因此我确实需要 在我的app中有个浏览器

我将尝试选择二 制作自己的浏览器

首先我想回到我的app

众所周知 如果我们在这个 app有一些网页内容 如果网页内容 碰巧是我的UI 或UI的一部分

WKWebView是最胜任的工具

当然 在本例中 我想使用WKWebView加载网页 加载网页 但是我同样想 在这方面使用一些UI 譬如 为展示这个URL 我想在顶端有一个URL栏条 为做后退前进导航 我也想在底部有一个工具条

WKWebView是个 非常丰富的API 它提供多种delegate功能 我可以用它们 侦听页面加载事件或导航事件 我可以使用这个delegate 驱动我的UI 为给这次演示节约时间 我已经有一个单一浏览器 让我们看一看下它 在Xcode项目中 我切换到另一个标签

把单一浏览器封装成视图控件 在中间我有WKWebView 在顶端我有一个导航栏 我用导航栏的标题显示此URL 在底部我有一个来回按钮 用来做后退和前进导航

这是一个简单类 它大约有80行代码 这花费我大约一小时 我相信我们可以做得更好 但是不管怎样 让我们测试一下这个浏览器 我回到我的... 店铺视图控件 删除刚添加的行 并把一些行拖拽到这里

我将要做的是从storyboard 加载我的视图控件 给它分配一个URL 并让它显示 现在让我们看一下

我运行我的app 选中第一个店铺 并点击链接

这是我的浏览器 它在我的app运行

为了访问此网站 我不必切换到Safari了 这很好 URL栏实际上变成了灰色 因此它不会变得使人分心

但是也请注意 当我拖拽页面时 没有使用Safari UI的动力

并且这个页面没有阅读器 这会因此现在对我来说 阅读比较困难 如果我尝试订购披萨

我的用户名和密码不会自动填充 尤其当我饥饿 不耐烦 没有密码时 订购披萨对我来说更困难

那么... 我真正需要的 是某种简单的 能从我的... app展示网站的方法 我不想花费时间 执行缺失的特性 如进度条功能 即使我想在这方面花时间 但有些特性我永远都不会触及 例如

密码自动填充功能 我将永远地不会得到 这个网站用户的密码

幸运的是 在iOS 9中我们有 一个Safari视图控件 让我们看一下

为使用Safari视图控件 首先我需要导入 Safari服务框架

然后我需要使我的视图控件遵从 SFSafariViewController Delegate协议

在代码里面 我们回到 showStoreWebsite 我不再需要我的浏览程序 因此我删除它

向这... 拖拽几行代码 现在我将要做的是我把我的... SafariViewControler 对象实例化

对其委托 显示它

在测试它以前 我还需要执行 safariViewControllerDidFinish 这样 当用户 点击“完成”(Done)按钮时 我们可以不再使用视图控件

因为这时我们 不再需要我们的浏览程序了 我们可以把它整个删除到垃圾箱 是的 那么代码少了80行 节约了一小时 让我们再次运行

选择第一个店铺

看 我的app中有Safari了

那么 我找回了阅读器

与Safari相同的动态感 而如果我现在尝试订披萨

我找回了自己的用户名和密码

如您所见 通过使用几行代码 我在自己的app中有了Safari 你们也可以在你们的app做这些 用户对此将会非常兴奋 谢谢你们

交给你 瑞奇

谢谢你 Yongjun 你的演示太棒了

Yongjun刚才向你们展示了 虽然用WKWebView编写 app内的网络浏览器中很简单 但是让所有细节都正确 是有些困难的

他也向你们展示了 通过改变七行代码 他能使用Safari视图控件 让app全然改观

你们看到Safari视图控件具有 譬如密码自动填充功能 阅读器 功能以及你们在使用网页 向下滚动时的动态感

刚才在讲座开始时 我将网页内容归为两类 一类是您的app中自定义的内容 你们将用WKWebView 处理此类内容 一类是当用户在你们的app中 点击链接的时的实际网站 你们会将用Safari或 Safari视图控件处理此类内容

但是对于你们观众中的某些人 网页内容使用还有 第三种使用情况 我简短谈一谈

这就是使用网页内容 做以网页为基础的验证 你们很可能以前都见到过这个 譬如 你们使用一个app 它需要使用一些第三方网站的账户 这个app出现一个网页视图 你们输入你们的用户名和密码 登录 然后你们选择接受或拒绝 App为第三方服务获取资源的请求 你们很可能以前都做过这些个 但是这方面有个流程叫做 OAuth 我会将大体讲讲具体 它是怎样工作的

在这个流程中... 有三个参与者

第一个参与者是一个app 我们假设它是你们的app

第二个参与者是一个用户 我们假设这是你们的一个用户

当然还有一个参与者 是你们的app 将验证的第三方网络服务

在用户使用这个app时 这个流程中会发生什么呢？ 他们大概会点击 某处的登录按钮 这个app将集中把用户信息打包 并用标记表明 它希望向网站请求什么内容

然后 app会以某种方式显示 一个可供登录的网页

用户需要输入他们的登录凭证

然后登录 接受或拒绝网页的请求 然后用户回到app

这样网站会记住这个标记 并了解它是否被同意使用 将来 当这个app想 连接到这个第三方服务时 它会使用这个标记

这个方案的主要目标 是保护用户的凭证 这样app不用记住它们 App只得到一个标记

这种标记可以在以后用于请求 资源或者用户可以在不更改 他们的密码时撤销这个标记 这对用户来说很给力

如果你们今天正实施此方案 你们大概 使用的是UIWebView 或WKWebView

我很高兴的告诉你们 Safari 视图控件在这方面很给力 它在以网络为基础的验证方面 很棒

它在基于网络的验证方面 很棒的一个原因是 它非常安全 它同Safari自身一样安全 因为它在进程之外运行 苹果公司永远 不会在用户登录时 看到用户的用户名和密码 在保护用户数据方面 一个最好的方法就是 首先就不去访问它 这是我们苹果公司的做法 不管何时 只要可能

这同样是用户欢迎的方法 因为Safari视图控件 访问用户凭证 通过iCloud Keychain 机制在他们的所有设备上同步 登录将变得轻而易举 他们可能不必使用自动填充功能 他们就可能已经 登录了第三方服务

简单的说 用户很想验证第三方网络服务 如果你们将使用 Safari视图控件 而不是你们自己写的东西

我高兴的告诉你们 采用它是极其容易 这需要两步

第一 是你们已经使用... 你们自己的App内置浏览器 只需要提供一个 SFSafariViewController实例 一旦用户完成登录 第三方网络服务 以您提供给它的自定义URL方案 有重定向回到你们的app 你们可以 用你们的AppDelegate的 handleOpenURL方法中 接受它 这时你们可以检查应答 停用 SFSafariViewController实例 因为您知道验证已经完成

好了 两步完成 你们已经用一个能够自动 填写用户名和密码的程序 替代了你们的app内置浏览器 用户将会很满意 你们也会有更多 用户登录这个第三方网络服务

好

我们总结今天讲座内容

网页内容无处不在 以各种形式和大小存在

如果您在自己的app中 以自定义方式使用它 如果你们有经验能够进行定制

WKWebView就是胜任的工具

你们或许仍在用较旧的 UIWebView 但是WKWebView更现代 并包含Safari自身使用的 这种新式 JavaScript引擎 它的速度更快 在iOS 9 和OS X El Capitan中 现在也有 更多适合你们的灵活的选择

若你们想了解多关于 采用WKWebView的更多内容 你们可以观看去年的讲座 《新式WebKit API简介》

如果你们网页内容... 任务不同 如果你们的任务是 当用户点击链接时展示网站 你们的使用情况和需求会完全不同

过去 你们或许已经用 UIWebView或WKWebView 建立自己app内置 网络浏览器 但是那种方法 一直有不利之处 它不曾有Safari所具有的 任何特性或状态 而且更可能的是 在并非出于您的自身错误情况下 你们的app的执行与用户 安装的其它app的执行不同 这有时会导致出现困惑的体验

你们的第一选择 出于情景的考虑 是将展示网页内容的责任委托给 Safari自身完成 系统广大的能力能够 回到上一个app 使这比以前更好

如果你们想使你们 现在用户保持体验 使用户不离开你们的app Safari视图控件会 增添大量特性 并且做长期优化

这样 你们会有更多时间用于 对你们的app特别重要的部分 你们很想把它们做好 对于你们的用户 这意味着有 Safari自动填写功能 9Safari阅读器功能 和内容屏蔽功能

趁你们还很专心听时 我有一个小要求

你们在开放平台上 如果遇到实际情况 与你们设想情况 有很大不同 请向我们发送bug和特性要求 Safari视图控件存在的 一个理由 是你们很多人说你们需要它

现在已经有了 既然你们将在未来几个月使用它 就请告诉我们 我们怎样做能使它对你们更有用 我们非常欢迎你们的反馈

你们能够在常用地点获得 任何关于我们 今天涉及到的信息 或者你们可以点击 约翰·戴维斯和 Safari WebKit Evangelist

我们有一些相关讲座 你们会对它们感兴趣

举两个例子 在《无缝连接到你们的App》 你们能学习Apple 解决app内部连接的方法 这包括使你们的URL通用 允许它们打开用户 iOS设备上你们设计的app 这太棒了 在Safari扩展 你们会学习怎样 写我刚才提到的内容屏蔽条件 这适用于在 Safari和 Safari视图控件 加载的所有网页

如果你们想得到我 今天所讲内容的帮助 你们可以使用Safari和 WebKit实验室 第一个在Media Lab A 时长大约半小时

好 谢大家 祝你们有一个愉快的WWDC之旅