• 本文由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请求。最后,第六行把网页加到视图控制器里的页面上。

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

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位置),你可以轻松获得这个功能。

这里有一些例子代码向你展示了如何从你的应用里启动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];
}

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

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

一个熟悉的用户界面

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

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

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架构师和用户体验设计师。

  • 更多译者翻译文章,请查看:http://www.cocoachina.com/special/translation/

  • 本文仅用于学习和交流目的,转载请注明文章译者、出处和本文链接。?

  • 感谢博文视点对本期活动的支持

WebKit、Safari以及SafariViewController相关推荐

  1. RemoteDebug iOS Webkit Adapter(适配器):一个可以让你(随时)随地调试Safari、 iOS WebView(的适配器)

    (简单来说),有了RemoteDebug iOS WebKit Adapter,你就可以在Windows以及Mac上,通过使用Chrome DevTools.VS Code.Firefox debug ...

  2. safari 扩展_为什么构建Safari应用扩展程序是2020年的噩梦

    safari 扩展 Safari App Extensions is the new way of Apple to develop Safari Extensions along with Coco ...

  3. WKWebView、Safari、SFSafariViewController的区别与选取

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

  4. 爬虫采集-基于webkit核心的客户端Ghost.py [爬虫实例]

    对与要时不时要抓取页面的我们来说,是痛苦的~ 由于目前的Web开发中AJAX.Javascript.CSS的大量使用,一些网站上的重要数据是由Ajax或Javascript动态生成的,并不能直接通过解 ...

  5. 目前主流的四大浏览器内核Trident、Gecko、WebKit以及Presto

    浏览器最重要或者说核心的部分是"Rendering Engine",可大概译为"渲染引擎",不过我们一般习惯将之称为"浏览器内核".负责对网 ...

  6. 各大浏览器兼容性报告 IE、FF、Safari、OP不同浏览器兼容报告

    IE.FF.Safari.OP不同浏览器兼容报告 分类:UI前端設計2011-12-05 17:01323人阅读评论(0)收藏举报 IE.FF.Safari.OP不同浏览器兼容报告 1浏览器内核简介 ...

  7. WebKit 内容整理

    [一]Webkit简介: WebKit 是一个开源的浏览器引擎,与之相对应的引擎有Gecko(Mozilla Firefox 等使用)和Trident(也称MSHTML,IE 使用).同时WebKit ...

  8. Webkit是什么?(Chrome浏览器的核心)

    Webkit是什么?(Chrome浏览器的核心) 本文为 www.ecgui.com(eCGUI-微型嵌入式GUI) 原创文章,欢迎转载,请保留链接 http://www.ecgui.com/html ...

  9. WebKit研究报告(转自http://blog.csdn.net/hou_jiong/archive/2009/01/18/3831022.aspx)

    目  录   一.Webkit 介 绍 .. 3 二.Webkit 编译详 解 .. 5 1. 依 赖库 及介 绍 .. 5 2.X11+Gtk+WebKit 交叉 编译详 解 .. 7 3. 编译 ...

最新文章

  1. oracle递归查询(查询条件ID下得所有子集)
  2. java与c/c++进行socket通信的一些问题(2)
  3. navicat连接CentOS的mysql在创建存储过程时出现1146 - Table ‘mysql.proc’ doesn't exist的问题
  4. DotNET多线程使用初探
  5. Spring Cloud Gateway 原生支持接口限流该怎么玩
  6. 虚拟机安装centeros7 无法连接网络 virsh命令找不到 删除多余的vir0 不然dubbo会有问题
  7. scipy.stats —— 概率、随机变量与分布
  8. linux提示有新邮件,/var/spool/mail/root 中有新邮件 解决方法
  9. 怎么在mac上更改移动硬盘的权限
  10. win10如何桌面添加计算机,win10系统桌面怎么添加计算机等图标
  11. 嵌入式软件工程师总结(1)
  12. 永恒之蓝漏洞自查-MS17010漏洞自查与修复
  13. 关于RecyclerView 设置条目间距
  14. .ps格式的文件怎么打开?方法:通过GSview打开或将.ps转换成.pdf
  15. Apollo代码学习(二)—车辆运动学模型
  16. 超声波的四个特性_超声波的几个特性
  17. 行测:判断推理(逻辑判断)
  18. 迭代最近点(Iterative Closest Point, ICP)算法
  19. PMOS与NMOS场效应管相关知识点
  20. Java基于JSP个人博客网站设计与实现

热门文章

  1. Arduino和单片机有啥区别?
  2. pycharm中django框架连接mysql数据库
  3. 23 20210525+0529直播 企业微信接口测试实战1+2
  4. HBase安装及使用
  5. 深度学习案例2:AlexNet网络识别14种鲜花
  6. 视频播放AVPlayer的使用
  7. 生物膜仿生纳米颗粒|HEK293胚肾细胞膜复合纳米脂质体|293T胚肾细胞膜修饰纳米囊泡具有靶向功能
  8. mrcc srcc_mrcc – MapReduce上的分布式C编译器系统
  9. 从市值14亿美元到1000美元,人人车经历了什么?
  10. 专车新规或下周发布,估计有大量司机流失