WebKit示例解读

如果你曾经在你的App中使用UIWebView加载网页内容的话，你应该体会到了它的诸多不尽人意之处。UIWebView是基于移动版的Safari的，所以它的性能表现十分有限。特别是在对几乎每个Web应用都会使用的JavaScript，表现的尤为糟糕。

但是，所有的这一切都在iOS 8引入了一个新的框架——WebKit，之后变得好起来了。在WebKit框架中，有WKWebView可以替换UIKit的UIWebView和AppKit的WebView，而且提供了在两个平台可以一致使用的接口。

WebKit框架使得开发者可以在原生App中使用Nitro来提高网页的性能和表现，Nitro就是Safari的JavaScript引擎。

WKWebView保证在滑动时保持60的帧率，同时具有KVO，内建手势，以及在App和网页之间的原生交流方式。

横跨2篇文章，我们即将建立2个App来探索WebKit的功能（特别是WKWebView）。在第一个App当中，我们将建立一个和Safari 功能相似的浏览器。在第二篇文章中，我们会深入到Webkit中去，探索更强大的功能：注入JavaScript到网页以改变内容和获取数据。

开始

打开Xcode，创建一个新的工程。选择Single View Application，取名叫Browser，选择Swift为开发语言，Devices选择Universal。

在ViewController.swift中导入WebKit框架。

1	import WebKit

将下面的变量加入到类中

1	var webView: WKWebView

将下面的方法加入到类中。它将会初始化webview并设置其frame为0.稍后我们会使用自动布局（auto layout）来给webview添加约束，这样这个webview就能在任何苹果设备和任何方向上正常工作了。

1 2 3 4

required init(coder aDecoder: NSCoder) {     self.webView = WKWebView(frame: CGRectZero)     super.init(coder: aDecoder) }

在viewDidLoad()底部，添加如下语句。这样这个webView就被添加到主视图了。

1	view.addSubView(webView)

接下来，在viewDidLoad()方法底部添加如下约束

1 2 3 4

webView.setTranslatesAutoresizingMaskIntoConstraints(false) let height = NSLayoutConstraint(item: webView, attribute: .Height, relatedBy: .Equal, toItem: view, attribute: .Height, multiplier: 1, constant: 0) let width = NSLayoutConstraint(item: webView, attribute: .Width, relatedBy: .Equal, toItem: view, attribute: .Width, multiplier: 1, constant: 0) view.addConstraints([height, width])

在此处，我们首先禁止了自动约束。然后我们对webview的宽和高添加了约束。这样webview就会和它的superview拥有一样的宽和高了。

在程序启动时，我们将会打开一个默认页。然后我们添加一个textfield控件，这样用户就能输入自己想浏览的地址了。在viewDidLoad（）底部添加如下代码

1 2 3

let url = NSURL(string:"http://www.appcoda.com") let request = NSURLRequest(URL:url!) webView.loadRequest(request)

运行程序。它将会加载Appcoda的主页。注意当你滑动页面的时候在导航栏下面也能看到模糊的网页，我们将禁止这样。首先打开 Main.storyboard选择网页显示的ViewController。在属性检查（也就是右边的第四栏中）将Extend Edges中得Under Top Bars去掉勾选。再次运行程序，我们就会发现导航栏已经没有了毛玻璃效果，而且我们也不能看见它下面的网页内容了。

接下来让我们添加给用户输入URL的控件。

在storyboard文件中，给向导航栏中拖放一个view。在属性检查（右边第四栏）中，设置其背景色为透明（clear color）。因为我们无法给导航栏中的view添加约束，我们将会以代码的形式调整其大小。

1	@IBoutlet weak var barView: UIView!

在viewDidLoad（）的super.viewDidLoad()之后添加如下代码

1	barView.frame = CGRect(x:0, y: 0, width: view.frame.width, height: 30)

这段代码设置了barView的大小。

将下面的方法添加到类

1 2 3

override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {     barView.frame = CGRect(x:0, y: 0, width: size.width, height: 30) }

这段代码将在设备方向改变时重新设置barView的大小。

接下来运行程序，你可以看见在导航栏中展开的view，如果更改设备方向，这个view也会跟着改变大小。

接下来，拖放一个textfield控件到这个view里面。然后点击画布右下方的Pin按钮（第二个）。将其top，bottom，right，left的距离设置为0，如下图所示。

然后依次点击，Editor-》Resolve Auto Layout Issues-》Selected View-》Update Frame，解决警告。

然后创建一个outlet。取名urlField。你应会看到如下代码。

1	@IBOutlet weak var urlField: UITextField!

我们希望viewcontroller能成为UITextFieldDelegate的代理，在storyboard的Document Outline中，按下control然后将textfield拖放到viewcontroller，然后在弹出视图选择delegate。

选择textfield控件，在属性检查（右边第四栏）设置如下属性。

1. Clear Button：Appears while editing

2. Correction： NO

3. Keyboard Type：URL

4. Return Key：Go

在类声明部分添加实现UITextFieldDelegate代码。

1	class ViewController: UIViewController, UITextFieldDelegate

接下来添加如下UITextFieldDelegate代码

1 2 3 4 5

func textFieldShouldReturn(textField: UITextField) -> Bool { urlField.resignFirstResponder() webView.loadRequest(NSURLRequest(URL: NSURL(string: urlField.text)!)) return false }

以上代码会隐藏键盘，然后加载用户输入的url。尝试输入一个url，我们发现。我们必须输入一个完整的url，比如：http://google.com。对我们的用户这有一点麻烦，我们可以检查用户的输入，然后给用户输入的url在必要时添加‘http://’前缀。这里我们不会详述了。

浏览历史

现在我们的浏览器已经能工作了，但是它还缺少了一些浏览器应有的功能。载入进度提示，前进和后退，刷新按钮，等等。

通过KVO（Key Value Observing），我们可以监听WKWebView的载入进度、网页标题和url属性。你可以使用这些来更新你的UI。

首先，让我们添加后退、前进及刷新按钮。

在storyboard中，选择View Controller，点击属性检查（Attributes Inspector），在Simulated Metrics一栏，将BottomBar选择为None。

拖放一个Toolbar到view得底部。添加其left，right和bottom距离为0，并确保Constrans to margins一栏没有被勾选。

在viewDidLoad（）方法中调整webView的高度，以显示toolbar。

1	let height = NSLayoutConstraint(item: webView, attribute: .Height, relatedBy: .Equal, toItem: view, attribute: .Height, multiplier: 1, constant: -44)

移除toolbar中得button，然后按顺序添加以下控件：Bar Button Item、Fixed Space Bar Button Item、Bar Button Item，Flexible Space Bar Button Item和Bar Button Item。toolbar应该是这个样子。

编辑bar button成下面的样子。这些按钮将成为我们的前进后退及刷新按钮。在一个真实的App当中，为这些按钮放上图标将是更好的选择，但是为了简便，我们使用文本。toolbar接下来应该是这个样子。

为每一个bar button创建一个outlet。取名为backButton，forwardButton和reloadButton。你应该会得到如下代码

1 2 3

@IBOutlet weak var backButton: UIBarButtonItem! @IBOutlet weak var forwardButton: UIBarButtonItem! @IBOutlet weak var reloadButton: UIBarButtonItem!

然后为每个按钮依次分别创建back，forward和reload方法。将每个action的Type更改为UIBarButtonItem。你应该会得到如下代码。

1 2 3 4 5 6 7 8

@IBAction func back(sender: UIBarButtonItem) { }   @IBAction func forward(sender: UIBarButtonItem) { }   @IBAction func reload(sender: UIBarButtonItem) { }

在viewDidLoad()的底部添加如下代码。我们不希望后退和前进按钮在App被启动时就可点击。

1 2	backButton.enabled = false forwardButton.enabled = false

在viewDidLoad（）的约束条件添加代码之后，创建并载入一个任务代码之前，添加如下代码。这句代码使得这个类成为了loading属性的监听者。

1	webView.addObserver(self, forKeyPath: "loading", options: .New, context: nil)

添加下面的方法到类。这个方法将会在可监听的属性变化时执行。后退和前进按钮将根据当前webview的状态来决定是否可被点击。

1 2 3 4 5 6

override func observeValueForKeyPath(keyPath: String, ofObject object: AnyObject, change: [NSObject : AnyObject], context: UnsafeMutablePointer) {     if (keyPath == "loading") {         backButton.enabled = webView.canGoBack         forwardButton.enabled = webView.canGoForward     } }

修改back（），forward（）和reload（）方法。

1 2 3 4 5 6 7 8 9 10 11 12

@IBAction func back(sender: UIBarButtonItem) {     webView.goBack() }      @IBAction func forward(sender: UIBarButtonItem) {     webView.goForward() }      @IBAction func reload(sender: UIBarButtonItem) {     let request = NSURLRequest(URL:webView.URL!)     webView.loadRequest(request) }

运行并测试这些按钮。后退和前进按钮开始时应该不可点击。当你浏览一个页面时，后退按钮应该可被点击。当你后退时，前进按钮应该可被点击。点击R按钮，会重新加载页面。

处理错误

我们不能保证用户总是输入正确地url，我们需要写代码来获取这一错误并提示用户。

首先修改类声明，如下所示：

1	class ViewController: UIViewController, UITextFieldDelegate, WKNavigationDelegate

WKWebView有一个属性navigationDelegate，接受一个实现WKNavigationDelegate协议的对象。这个协议提供了多种方法来处理导航事件，包括载入错误。

在init（）底部添加如下代码。通过下面的代码，我们将这个类设置成了webview的navigation代理。

1	self.webView.navigationDelegate = self

接下来添加如下方法。这个代理方法将会在有错误发生时被调用。

1 2 3 4 5

func webView(webView: WKWebView!, didFailProvisionalNavigation navigation: WKNavigation!, withError error: NSError!) {     let alert = UIAlertController(title: "Error", message: error.localizedDescription, preferredStyle: .Alert)     alert.addAction(UIAlertAction(title: "Ok", style: .Default, handler: nil))     presentViewController(alert, animated: true, completion: nil) }

运行程序，输入一个错误的url测试一下。

显示进度

最后，我们将会添加一个进度显示。

在storyboard文件中，在导航栏下方添加一个progress view。设置其top，right和left如下所示。

为progress view创建一个outlet。你应该会得到下面的代码。

1	@IBOutlet weak var progressView: UIProgressView!

在ViewController中，替换西面的代码

1	view.addSubview(webView)

为

1	view.insertSubview(webView, belowSubview: progressView)

在viewDidLoad（）中创建和载入一个url任务之前添加下面的代码，调用webview的addObserver方法。

1	webView.addObserver(self, forKeyPath: "estimatedProgress", options: .New, context: nil)

在observeValueForKeyPath（）方法中的其他if语句之后添加如下代码。

1 2 3 4

if (keyPath == "estimatedProgress") {     progressView.hidden = webView.estimatedProgress == 1     progressView.setProgress(Float(webView.estimatedProgress), animated: true) }

这段代码将会更新progressview的进度，如果加载完毕会隐藏progressview。

在类中添加如下代码。这是一个WKNavigationDelegate的代理方法，将会在页面载入完毕后执行。当一个任务完成后，我们使用它来重置progress view的进度。

1 2 3

func webView(webView: WKWebView!, didFinishNavigation navigation: WKNavigation!) {     progressView.setProgress(0.0, animated: false) }

运行程序，当网页加载时，你将会看到一个蓝色的进度条。

总结

我们已经了解了WebKit的基础部分。我们看到如何添加一些和Safari相似的功能，如载入url，浏览历史，检测错误，展示进度。