作者: iOS团队 - 高祥
官方链接:
WKWebView在iOS11主要提供了一下三个功能:
- Manage cookies(Cookie管理)
- Filter unwanted content(过滤内容)
- Provide custom resources(加载本地资源)
本文将详细介绍如何加载本地的资源(Image & JS)
示例工程项目在: 分支: Provide-Custom-resources
一、准备工作
-
新建一个工程,命名为wwdc2017-220-WKWebViewSimpleDemo
-
导入 WebKit
-
创建WKWebView，加载事先准备好的URL
准备好的URL(后面要对这个html分析)http://oub5vvxvp.bkt.clouddn.com/customized_wkwebView.html复制代码
运行起来，毛都没有？ what？ 出错了？ 不不不，你需要在info.plist中添加ATS
NSAppTransportSecurity NSAllowsArbitraryLoads 好了，在运行一下，如果成下面这样，恭喜你，准备工作完成了。
二、自定义资源
自定义资源一共分为如下步骤:
- 自定义 URL Scheme
- 设置 URLSchemeHandler
- Provide custom resource(提供对应的资源)
2.1 自定义 URL Scheme
在上面的加载视图中，可以看到，图片未加载出来，而且点击按钮也是没有任何响应的. 在HTML中，定义了 img.src 和 js.src 为 URL Scheme
html代码
自定义图片:canineschool-avatar://photo
自定义 JS 代码 canineschool-avatar://javascript
复制代码
关于URL Scheme我就不详细的去说了，不懂的话可以去参考这篇文章。
值得指出的是，在html中配置的URL Scheme, 是不需要注册到info.plist URL Types的
2.2 设置 URLSchemeHandler
明确了需要处理的URL Scheme 之后，就需要一个“处理者”。 可以通过WKWebViewConfiguration来设置.
open func setURLSchemeHandler(_ urlSchemeHandler: WKURLSchemeHandler?, forURLScheme urlScheme: String)复制代码
而其中: WKURLSchemeHandler 是一个自定义的协议
@available(iOS 11.0, *)public protocol WKURLSchemeHandler : NSObjectProtocol { public func webView(_ webView: WKWebView, start urlSchemeTask: WKURLSchemeTask) public func webView(_ webView: WKWebView, stop urlSchemeTask: WKURLSchemeTask)}复制代码 好了，这些很明确了，我们需要一个对象，来遵循这个协议来，然后再协议定义的方法里面去处理. So Easy
自定义一个 Handler，遵循对应的协议
class MyURLSchemeHandler : NSObject, WKURLSchemeHandler { func webView(_ webView: WKWebView, start urlSchemeTask: WKURLSchemeTask) { } func webView(_ webView: WKWebView, stop urlSchemeTask: WKURLSchemeTask) { }}复制代码 改变WebView的初始化方式
let configuration = WKWebViewConfiguration() configuration.setURLSchemeHandler(MyURLSchemeHandler(), forURLScheme: "canineschool-avatar") let webView = WKWebView(frame: self.view.bounds, configuration: configuration)复制代码
注意: 一个Handler 只能处理一个 URL Scheme
2.4 Provide custom resource(提供对应的资源)
-
首先准备好资源
-
在 WKURLSchemeHandler 的 start 中方法中处理URL Scheme
处理代码，仅参考
func webView(_ webView: WKWebView, start urlSchemeTask: WKURLSchemeTask) { let urlString = urlSchemeTask.request.url?.absoluteString ?? "" guard let type = URLSchemeType(rawValue: urlString) else { urlSchemeTask.didFailWithError(URLSchemeError.NotSupport(url: urlString)) return } print(urlString) var response : URLResponse? var data : Data? switch type { case .Photo: guard let img = UIImage(named: "avatar"), let imageData = UIImagePNGRepresentation(img) else { return urlSchemeTask.didFailWithError(URLSchemeError.LackResource(url: urlString)) } data = imageData response = URLResponse(url: urlSchemeTask.request.url!, mimeType: "image/png", expectedContentLength: imageData.count, textEncodingName: nil) case .Script: guard let path = Bundle.main.path(forResource: "alert.js", ofType: nil) else { return urlSchemeTask.didFailWithError(URLSchemeError.LackResource(url: urlString)) } let fileURL = URL(fileURLWithPath: path) guard let scriptData = try? Data(contentsOf: fileURL) else { return urlSchemeTask.didFailWithError(URLSchemeError.LackResource(url: urlString)) } data = scriptData response = URLResponse(url: urlSchemeTask.request.url!, mimeType: "text/javascript", expectedContentLength:scriptData.count, textEncodingName: nil) } guard let receiveData = data, let res = response else { return } urlSchemeTask.didReceive(res) urlSchemeTask.didReceive(receiveData) urlSchemeTask.didFinish() }复制代码 处理对应的URL Scheme 需要注意如下几点:
1. 处理生成的 URLResponse 必须要有mimeType > mimeType类型可以在
2.处理成功，必须要调用如下代码
// 告诉wkwebView 接收到了响应urlSchemeTask.didReceive(res)// 提供给webview对应的数据urlSchemeTask.didReceive(receiveData)// 告诉webView完成了urlSchemeTask.didFinish()复制代码