How to monitor WKWebView page load progress using key-value observing

Swift version: 5.10

Paul Hudson @twostraws May 28th 2019

iOS often uses a delegate system to report important changes, such as when a table view cell has been tapped or when a web page has finished loading. But the delegate system only goes so far, and if you want fine-grained detailed information sometimes you need to turn to KVO, or "key-value observing."

In the case of seeing how much of a page has loaded in WKWebView, KVO is exactly what you need: each web view has a property called estimatedProgress, and you can be asked to be notified when that value has changed.

First, create a progress view that will be used to show the loading progress:

progressView = UIProgressView(progressViewStyle: .default)
progressView.sizeToFit()

You can place that anywhere you like. Now add the current view controller as an observer of the estimatedProgress property of your WKWebView, like this:

webView.addObserver(self, forKeyPath: #keyPath(WKWebView.estimatedProgress), options: .new, context: nil)

The .new in that line of code means "when the value changes, tell me the new value."

Finally, implement the observeValue(forKeyPath:) method in your view controller, updating the progress view with the estimated progress from the web view, like this:

override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
    if keyPath == "estimatedProgress" {
        progressView.progress = Float(webView.estimatedProgress)
    }
}