仿照微信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%的加载状态。

对于小白用户而言,微信的加载条让人『感觉』更快。

除了这一点,WKWebViewestimatedProgress并不会均匀地返回结果。很可能第一次返回结果就是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

你可能感兴趣的:(仿照微信WebView实现ProgressBar - Swift)