仿照微信WebView实现ProgressBar - Swift

两种进度条逻辑

在网页中，一般我们会用顶部进度条来表示当前网页加载的进度。这里最常见的就是像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那样的真实进度。

本人初学，有错误或疏漏之处，欢迎斧正！

参考文档：

• https://www.jianshu.com/p/24b3e3ddc946