WKWebView的简介和使用

翻译文章 WKWeb​View

前言

史蒂夫·乔布斯的WWDC 2007主题演讲:

Iphone内部有一套完整的Safari引擎。因此,您可以编写令人惊叹的Web2.0和Ajex应用程序,其外观与iPhone会上的应用程序完全相同。而这些应用程序可以完美地与iPhone服务集成。他们可以拨打电话,发送电子邮件,他们可以在Google地图上查找位置。

网络一直是iOS上的二等公民(这很具有讽刺意味,因为iPhone主要负责今天的移动网络)。UIWebView是巨大而笨重的,并且存在泄漏内存。它滞后于有Nitro JavaScript 引擎的移动Safari。

然而,随着WebKit框架和WKWebView的引入,所有这一切都发生了变化。

WKWebView是iOS 8和OS X Yosemite中引入的现代WebKit API的核心。它取代了UIKit 的UIWebView和AppKit 的WebView,在两个平台上提供了一致的API。

拥有响应60fps滚动,内置手势,简化应用程序和网页之间的通信,以及与Safari相同的JavaScript引擎,WKWebView是WWDC 2014最重要的发布之一。

在UIWebView&UIWebViewDelegate 的类和协议,已经在WKWebKit分解成为14类和 3个协议。不要为复杂性的巨大跳跃而惊慌 - 这种新的架构允许大量的新功能:

classes

  • WKBackForwardList :在网页视图中,之前访问的网页列表,可以通过后退或前进来访问。
  • WKBackForwardListItem:表示Web视图的后退列表中的网页。
  • WKFrameInfo : 包含有关网页框架的信息。
  • WKNavigation:包含用于跟踪网页加载进度的信息。
    • WKNavigationAction:包含有关可能导致导航的操作的信息,用于制定策略决策。
    • WKNavigationResponse:包含有关导航响应的信息,用于制定策略决策。
  • WKPreferences : 封装Web视图的首选项设置。
  • WKProcessPool:表示WebContent进程池
  • WKUserContentController:为JavaScript提供一种发布消息并将用户脚本注入到Web视图的方法。
    • WKScriptMessage:包含有关从网页发送的消息的信息。
    • WKUserScript :表示可以注入到网页的脚本。
  • WKWebViewConfiguration : 用于初始化web视图的属性集合。
  • WKWindowFeatures :请求新的Web试图是,为包含窗口指定可选属性。

协议

  • WKNavigationDelegate:提供跟踪主框架导航进度和决定主框架和子框架导航的加载策略的方法。
  • WKScriptMessageHandler:提供一种从网页中运行的JavaScript接收消息的方法。
  • WKUIDelegate:提供了代表网页呈现本地用户界面元素的方法。

UIWebView&WKWebView的API的差异

WKWebView和UIWebView有很多相似的接口,使得应用程序可以很方便的迁移到WKWebKit。(WKWebView需要在iOS8以及之后的系统中运行)。

下面是每个类的API比较:

初始化:

初始化.png

载入中

载入中1.png
载入中2.png

历史

历史.png

Javascript

Javascript.png

其它

其它.png

分页

WKWebView 目前缺乏用于分页内容的等效API。

  • var paginationMode: UIWebPaginationMode
  • var paginationBreakingMode: UIWebPaginationBreakingMode
  • var pageLength: CGFloat
  • var gapBetweenPages: CGFloat
  • var pageCount: Int { get }

WKWebViewConfiguration重构成

以下属性UIWebView已被分解到一个单独的配置对象中,该配置对象被传递给WKWebView初始值设定项:

  • var allowsInlineMediaPlayback: Bool
  • var mediaPlaybackRequiresUserAction: Bool
  • var mediaPlaybackAllowsAirPlay: Bool
  • var suppressesIncrementalRendering: Bool

JavaScript ↔︎ Swift通信

可以在应用程序和其网页内容之间来回传递数据和交互,是WKWebView针对UIWebView的主要改进之一。

用户脚本注入行为

WKUserScript允许在文档加载的开始或结束时注入JavaScript行为。这个强大的功能可以让网页内容的跨页面请求以安全和一致的方式被操纵。

作为一个简单的例子,下面是如何注入用户脚本来改变网页的背景颜色:

let source = "document.body.style.background = \"#777\";"
let userScript = WKUserScript(source: source, injectionTime: .AtDocumentEnd, forMainFrameOnly: true)

let userContentController = WKUserContentController()
userContentController.addUserScript(userScript)

let configuration = WKWebViewConfiguration()
configuration.userContentController = userContentController
self.webView = WKWebView(frame: self.view.bounds, configuration: configuration)

WKUserScript使用 JavaScript源进行初始化,可以配置在加载页面开始时,或者结束时注入脚本。或者是配置对所有框架使用此行为,还是只适用主框架。然后将用户脚本添加到传入初始WKUserContentController值设定项的WKWebViewConfiguration对象上WKWebView
这个例子可以很容易地扩转到页面进行更重大的修改,例如。删除广告,隐藏评论,或者可能将所有可能出现的“云”,进行对接。

changing all occurrences of the phrase “the cloud” to “my butt”

消息处理程序

通过消息处理程序,从网络到应用程序的通信也得到了显着改善。

就像console.log向Safari Web Inspector调试控制台输出信息一样,来自网页的信息可以通过以下方式传递回应用程序:

JavaScript
window.webkit.messageHandlers.{NAME}.postMessage()

这个API的真正好处在于JavaScript对象被自动序列化到本地Objective-C或Swift对象中。
该处理程序的名称被配置在addScriptMessageHandler()其中,该寄存器符合该WKScriptMessageHandler协议:

class NotificationScriptMessageHandler: NSObject, WKScriptMessageHandler {
    func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage!) {
        print(message.body)
    }
}

let userContentController = WKUserContentController()
let handler = NotificationScriptMessageHandler()
userContentController.addScriptMessageHandler(handler, name: "notification")

现在,当一个通知进入应用程序,比如通知在页面上创建一个新对象时,该信息可以通过:

JavaScript

window.webkit.messageHandlers.notification.postMessage({body: "..."});

添加用户脚本为使用消息处理程序将状态传回应用程序的网页事件创建接口。

可以使用相同的方法从页面上刮取信息以在应用程序中显示或分析。

例如,如果有人专门为NSHipster.com构建浏览器,则可能会有一个按钮在弹出窗口中列出相关的文章:

// document.location.href == "http://nshipster.com/webkit"
function getRelatedArticles() {
    var related = [];
    var elements = document.getElementById("related").getElementsByTagName("a");
    for (i = 0; i < elements.length; i++) {
        var a = elements[i];
        related.push({href: a.href, title: a.title});
    }

    window.webkit.messageHandlers.related.postMessage({articles: related});
}

如果你的应用程序不仅仅是一个围绕Web内容的精简容器,而且WKWebView是一个改变游戏规则的游戏。所有您渴望的性能和兼容性终于可用。这是你所希望的一切。

如果你更喜欢纯粹的本机控制,那么你可能会对iOS 8中的新技术所提供的强大功能和灵活性感到惊讶。像Messages这样的一些股票应用使用WebKit来渲染棘手的内容是一个肮脏的秘密。您可能没有注意到这一事实应该是一个Web视图实际上在应用程序开发最佳实践中占有一席之地的指标。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容