仿照微信WebView实现ProgressBar
两种进度条逻辑
在网页中，一般我们会用顶部进度条来表示当前网页加载的进度。这里最常见的就是像Safari或Chrome浏览器那样的，用真实的进度百分比来更新进度条。当网速较慢时，进度条几乎完全不动；当网速较快时，进度条则会从大约20%位置嗖一下快速变为100%。
还有一种，就是微信App里的网页加载进度条。这里的进度条反映的不是真实的加载进度，其设计初衷应该就是让网页加载『看起来』更快。经过观察，大约是这样的一个逻辑：
打开网页，进度条就进到10%；
再用3秒钟，进度条从10%走到60%；
再用4秒钟，进度条从60%走到80%；
再用8秒钟，进度条从80%走到90%；
从90%位置开始，进度条开始反应真实的加载进度。若此时网络连接极差，那么将会在90%卡住很久。
在以上的15秒内，若真实进度超过90%，则直接切换到真实进度，所以2秒打开的网页，也只会用2秒，不会固定加载15秒。
从用户提交角度，可以对比不同网速下打开网页时进度条的表现：
- 网速快，那么微信用3秒就进到60%，然后第4秒刷一下到100%；而Safari则是慢慢地移动到30%左右，然后刷的进到100%。
- 网速慢，那么微信用15秒加载了90%，只差最后10%加载不出；而Safari则一直处于不足10%的加载状态。
对于小白用户而言，微信的加载条让人『感觉』更快。
除了这一点，WKWebView的estimatedProgress并不会均匀地返回结果。很可能第一次返回结果就是0.5，然后就是0.1。这样Safari加载时，会看到进度条忽快忽慢。
总结起来：
estimatedProgress返回值不均匀，这样进度条进度并不平滑；- 虚假进度给人『更好』的用户体验。
仿微信网页进度条实现方式Swift4
该实现依赖于对KVO有一定的了解，若不了解，可以参考另一篇：理解KVO - 用Swift在WKWebView中添加进度条
首先，声明必要的变量。
// 我们的网页，因为要使用KVO，所以对象必须添加@objc
@objc var webView = WKWebView()
// 我们要监听的另一个对象，即网页加载时间，同样因为要使用KVO，属性要添加@objc和dynamic
@objc dynamic var loadTime: Double = 0.0
// 这个是我们的进度条
var progressLayer: CALayer!
// 统计页面加载时间的timer
var timer: Timer?
// 这是用于监听webView.estimatedProgress和loadTime的两个监听对象
var progressObservation: NSKeyValueObservation?
var loadTimeObservation: NSKeyValueObservation?
接着，创建进度条。
func setUpWebView() {
webView.frame = view.bounds
webView.navigationDelegate = self
webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
guard let url = URL(string: urlString!) else {
print("url is nil")
return
}
webView.load(URLRequest(url: url))
let progress = UIView(frame: CGRect(x: 0, y: 0, width: webView.frame.width, height: 3))
webView.addSubview(progress)
progressLayer = CALayer()
progressLayer.backgroundColor = APPColor.orange.cgColor
progress.layer.addSublayer(progressLayer!)
view.addSubview(webView)
// 设置初始进度条位置为10%
progressLayer!.frame = CGRect(x: 0, y: 0, width: webView.frame.width * 0.1, height: 3)
}
声明遵循WKNavigationDelegate 协议后，在协议方法中添加设置监听对象和包含对应处理方法的闭包。
func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
switch navigationAction.navigationType {
// other类型，直接从外部赋值url打开页面时，就属于other
case .other:
print("its an other situation")
case .reload:
print("it's a reload situation")
case .backForward:
print("its going back")
case .formResubmitted:
print("resubmited")
case .formSubmitted:
print("from submitted")
// 点击当前页面连接打开新连接
case .linkActivated:
print("link activited")
}
startProgress() // 设置progressBar初始状态，并添加观察，参考下文
destroyTimer() // 保险起见，再摧毁一次timer
startTimer() // 启动timer开始计时
// 是否允许访问
decisionHandler(.allow)
}
func startTimer() {
// 设置timer为每0.1秒为loadTime赋值，这样可以大约0.1秒就修改一次进度条，看起来更平滑
timer = Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true, block: { (timer) in
weak var weakself = self
weakself?.loadTime += 0.1
})
}
func destroyTimer() {
timer?.invalidate()
loadTime = 0.0
}
func startProgress() {
progressLayer.opacity = 1
progressLayer!.frame = CGRect(x: 0, y: 0, width: webView.frame.width * 0.1, height: 3)
setupObservations() // 设置监听
}
// 设置监听
func setupObservations() {
setupProgressObservation()
setupLoadTimeObservation()
}
// 停止监听
func stopObservations() {
progressObservation?.invalidate()
loadTimeObservation?.invalidate()
}
下面是设置监听的具体方法，也是重头戏：
// 监听webView.estimatedProgress，即页面加载实际进度
func setupProgressObservation() {
progressObservation = webView.observe(\.estimatedProgress, options: [.old, .new], changeHandler: { (webView, change) in
let newValue = change.newValue ?? 0
let oldValue = change.oldValue ?? 0
weak var weakself = self
// 在达到0.9之前，进度条由loadTime决定；到0.9以后，根据实际进度进行加载
if newValue > oldValue && newValue > 0.9 {
weakself?.progressLayer.frame = CGRect(x: 0, y: 0, width: (weakself?.webView.frame.width)! * CGFloat(newValue), height: 3)
}
if newValue == 1.0 {
// 加载结束时，停止监听，停止timer
weakself?.stopObservations()
weakself?.destroyTimer()
// 结束时隐藏progress bar并回到初始位置
let time1 = DispatchTime.now() + 0.4
let time2 = time1 + 0.1
DispatchQueue.main.asyncAfter(deadline: time1) {
weakself?.progressLayer.opacity = 0
}
DispatchQueue.main.asyncAfter(deadline: time2) {
weakself?.progressLayer.frame = CGRect(x: 0, y: 0, width: 0, height: 3)
}
}
})
}
// 监听loadTime
func setupLoadTimeObservation() {
loadTimeObservation = observe(\.loadTime, changeHandler: { (self, changes) in
weak var weakself = self
// 假如加载进度超过90%，则不再通过loadTime更新
if weakself!.progressLayer.frame.width >= weakself!.webView.frame.width * 0.9 { return }
var ratio = 0.0 // 进度条的进度比例
guard let time = weakself?.loadTime else { return }
if time <= 3 {
// 前3秒进度条走50%，那么每秒是走0.5 / 3；
// 0.1是已经固定的进度，下面的逻辑类似
ratio = time * 0.5 / 3 + 0.1
} else if time > 3 && time <= 7 {
ratio = (time - 3) * 0.2 / 4 + 0.6
} else if time > 7 && time <= 15 {
ratio = (time - 7) * 0.1 / 8 + 0.8
} else if time > 15 && time < 25 {
ratio = 0.9
}
weakself?.progressLayer.frame = CGRect(x: 0, y: 0, width: weakself!.webView.frame.width * CGFloat(ratio), height: 3)
})
}
这样，进度条的全部实现已经完成。
如果对KVO有不理解，可以参考我的另一篇使用KVO的例子：理解KVO - 用Swift在WKWebView中添加进度条。在这篇文章中，我用于实现进度条的逻辑正是像Safari那样的真实进度。
本人初学，有错误或疏漏之处，欢迎斧正！
参考文档：