你的位置:首页 > 操作系统

[操作系统]iOS开发:WebKit、Safari以及SafariViewController


  • 本文由CocoaChina译者ztdj121(博客)翻译,校对:星夜暮晨

  • 作者:Eva Diaz-Santana

  • 原文:WebKit, Safari and SafariViewController

自iOS问世以来,iOS 和web总是形影相随。毕竟,当iOS诞生的时候,网站已经有15年的历史了(第一个网站的创建甚至可以追溯到1991年,而iOS在2007年才出现)。iPhone出现的时候就已经有很多的web内容了,这样iOS必须提供一种方法来显示web内容。

在iOS 9中,我们有不同的方法来渲染web内容,并且根据具体的需求,开发者可以评估不同的方法,然后选择一个更适合他们的方法。让我们看看开发者可以采用的不同的解决方案。

WebView

WebKit是OS X和iOS中Safari背后的架构和渲染引擎。它允许解析和渲染html,加载并显示图片,以及执行JavaScript代码。

UIWebView类在iOS 2中引入,是UIKit的一部分。它现在被广泛地应用,而且已经有相当长的一段时间了。在一个iOS应用中,UIWebView是唯一一个可以嵌入web内容的工具。

在iOS 8上,Apple引入了WKWebView,以代替 iOS 上的UIWebView,以及OS X上的WebView。新的API接口给两个平台带来了完全相同的功能,简化了应用和网页之间的通信流程,同时多进程架构也可以用在Safari上。

WKWebView提供了许多以前只能在 Safari 上使用的特性。它使用硬件加速器和Core Animation提供一个60fps的滚动响应、快速执行JavaScript代码,和像内置在Safari上的滑动后退和缩放的手势。其超越UIWebView的一个主要改进就是简化了应用-网页(app-webpage)间的通信、简化了应用和其 web 内容之间交互和数据是如何进行传递的。

WKWebView很容易实现。这里用Swift语言写的代码证明了这点:

1
2
3
4
5
6
let viewFrame = ... //1
let webView = WKWebView.init(frame: viewFrame) //2
let url = NSURL(string: "https://www.invasivecode.com") //3
let request = NSURLRequest(URL: url!) //4
webView.loadRequest(request) //5
view.addSubview(webView) //6



以下是Objective-C版本:

1
2
3
4
5
6
CGRect viewFrame = ... //1
WKWebView *webView = [[WKWebView alloc] initWithFrame:viewFrame]; //2
NSURL *url = [NSURL URLWithString:@"https://www.invasivecode.com"]; //3
NSURLRequest *request = [NSURLRequest requestWithURL:url]; //4
[webView loadRequest:request]; //5
[self.view addSubview:webView]; //6



第一行定义了用于第二行初始化webView的frame。第三行创建并返回了一个用URL字符串初始化的NSURL对象。第四行创建并返回了一个URL请求。第五行里,网页加载了URL请求。最后,第六行把网页加到视图控制器里的页面上。

这边是以上代码运行出来的效果:

ic-wkwebview.png

WKWebView是web内容的一个视图,它允许使用Javascript和html渲染。你可以添加自己的返回按钮,前进按钮和进度指示器。在iOS 9中,你可以另外安全地加载文件的url和数据。

WKWebsiteDataStore在iOS 9和OS X 10.11中引入,是一个新的API,它用于管理一个网站站点存储的数据,例如cookies,它是你网页的WKWebViewConfiguration上的一个可读写的属性。你可以根据类型或者时间来删除数据,例如cookies和缓存,你可以用非持久性数据存储来改变配置。

WKWebView提供了很多特性,如果你有web内容并且需要自定义,你可以用这个工具,使用Javascript参数来实时控制页面。

然而,如果你只是想显示web内容,你既可以用Safari,也可以用SFSafariViewController。让我们来看看这两种方法。

Safari

用Safari允许你将渲染 web 内容的任务委托 Safari。这样你就可以比在使用WKWebView时少写些代码了。

要从应用程序里启动Safari的话,你可以调用UIApplication中的openURL:方法,然后iOS会把Safari带到前台,把你的应用程序放到后台。

iOS9上的一个新的特性是允许用户通过一个返回按钮回到你的应用里,这个按钮自动出现在用户界面的左上角上(看下图里的A)。

由Safari提供的一样很好的用户体验,这对开发者来说是一个简单的解决方法。下一张图片突出了UI组件(看下图的B和C位置),你可以轻松获得这个功能。

ic-safari.png

这里有一些例子代码向你展示了如何从你的应用里启动Safari,来渲染一些web内容:

Swift

 

1
2
3
4
@IBAction func showWebSite() {
    let url = NSURL(string: "https://www.invasivecode.com")
    UIApplication.sharedApplication().openURL(url!)
}



这有Objective-C语言写的相同源代码:

1
2
3
4
- (IBAction)showWebSite:(id)sender {
    NSURL *url = [NSURL URLWithString:@"https://www.invasivecode.com"];
    [[UIApplication sharedApplication] openURL:url];
}



Safari View Controller

让我们来看下SFSafariViewController。这个类已经在iOS9里引入了。使用SFSafariViewController,Safari被嵌入到你的应用程序里,用户就不用退出你的应用了。

Safari ViewController消除了干扰,把URL字段转换成只读的(看下图中的D),以及一个完成按钮用以回到你的应用中(看图片上的E)。

这里,有些例子代码展示了通过SafariViewController如何给你的用户提供web内容。

让我们先看看用Swift语言的实现:

1
2
3
4
5
@IBAction func showWebSite() {
    let url = NSURL(string: "https://www.invasivecode.com")
    let safariVC = SFSafariViewController(URL: url!)
    self.showViewController(safariVC, sender: nil)
}



现在来看下用Objective-C语言写的相同的实现:

1
2
3
4
5
- (IBAction)showWebSite:(id)sender {
    NSURL *url = [NSURL URLWithString:@"https://www.invasivecode.com"];
    SFSafariViewController *safariVC = [[SFSafariViewController alloc] initWithURL:url];
    [self showViewController:safariVC sender:nil];
}



以上代码的结果和下图的相似:

ic-safariviewcontroller1.png

现在,让我们把你在应用程序中用到的SafariViewController提供的特点分一一分类。

一个熟悉的用户界面

SafariViewController提供了和Safari一样的界面,允许你在应用程序中无缝集成,更尊重你应用的色调。你会发现它有Safari提供的相同的共享方法,用户可以将网页添加到阅读列表里,或者把页面发送给朋友(看下图的F)。此外,开发者也可以添加专用按钮到表单上。

ic-safariviewcontroller2.png

密码、信用卡和联系卡自动填充

SFSafariViewController允许用户安全按地自动填充iCloud钥匙串里的敏感信息和证书。这包括填充密码、信用卡和联系人信息。

用Safari共享的Cookies

Safari和SFSafariViewController共享Cookies,意味着两者间的用户会话和偏好依然存在。比如,如果用户已经用Safari注册或者将他们的密码存在iCloud钥匙串里,授权一个应用程序访问Twitter或者Facebook的时候,将会是一个流畅的用户体验。

Safari阅读器

Safari阅读器按钮将会允许用户显示一个易读版本的网站,供用户选择提供的主题和字体。

Content Blocking(内容阻挡/内容拦截外挂程式)

iOS9开始,任何应用程序可以写一个web内容的描述,用户浏览网页的时候Safari和SafariViewController进行拦截。此外,用户也可以在设置里添加内容拦截元素(Content blocking elements)。那些元素将被拦截,不展示给用户。这意味着应用程序用Safari或者SafariViewController展示的网页内容,将会被用户或者开发者选择的内容拦截元素(Content blocking elements)影响。内容拦截元素(Content blocking elements)可以是网页或者拦截加载的单独的元素,就像页面里的所有的图片和脚本一样。

总结

当在你的应用程序里展示web内容,你可以选择不同的方法,这取决于你的需求。如果你需要修改或操作web内容,iOS8中引入的WKWebView为我们提供了极大的灵活性。在应用程序里启动Safari,会给用户和Safari提供的相同体验,但是你的用户可能不会再回到你的应用程序里。SFSafariViewController像是在你的应用中嵌入了Safari,而且很容易使用。

关于作者

Eva Diaz-Santana(@evdiasan)是invasiveCode的创始人。2008年以来,她开发iOS应用,并且教授iOS开发课程。同时她在苹果公司工作,担任Cocoa架构师和用户体验设计师。

问啊-一键呼叫程序员答题神器,牛人一对一服务,开发者编程必备官方网站:www.wenaaa.com

QQ群290551701 聚集很多互联网精英,技术总监,架构师,项目经理!开源技术研究,欢迎业内人士,大牛及新手有志于从事IT行业人员进入!