Turning EstimatedProgress/ProgressView into progress bar in WKWebView

Question

I'm having trouble figuring out how to get ProgressView, which I've converted into estimated progress into a UI progress bar that can be seen. In my output I can clearly see that it is tracking the data but nothing is shown on the UI when a test is run. I want to add a progress bar to the bottom of my navigation bar.

class CycleViewController: UIViewController, WKNavigationDelegate, WKUIDelegate {

@IBOutlet var webView: WKWebView!
@IBOutlet var progressView: UIProgressView!

override func loadView() {
    let webConfiguration = WKWebViewConfiguration()
    webConfiguration.applicationNameForUserAgent = "Version/8.0.2 Safari/600.2.5"
    webView = WKWebView(frame: .zero, configuration: webConfiguration)
    webView.uiDelegate = self
    view = webView

    progressView = UIProgressView(progressViewStyle: .default)
    progressView.sizeToFit()
    progressView.progressTintColor = UIColor(red: 255/255, green: 204/255, blue: 0/255, alpha: 1.0)

}

override func viewDidLoad() {
    super.viewDidLoad()

    webView.backgroundColor = UIColor.clear
    webView.backgroundColor = UIColor(red: 0.0196, green: 0.4, blue: 0.2902, alpha: 1.0)
    webView.isOpaque = false

    self.webView.load(NSURLRequest(url: URL(string: "https://jwelsh19.wixsite.com/countryday")!) as URLRequest);

    self.webView.addObserver(self, forKeyPath: "estimatedProgress", options: .new, context: nil);
}

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

}

Why you are doing this if you already setup your progress bar in xib file progressView = UIProgressView(progressViewStyle: .default) — Muhammad Shauket, Nov 08 '18 at 01:30
When I load the build it shows WKWebView taking up the full ViewController with no progress bar on the screen @ShauketSheikh — Nigel Denny, Nov 08 '18 at 01:32
Where did you add this progressView ?? from your code i can see you are creating new object of progress bar but not add in view. — Muhammad Shauket, Nov 08 '18 at 01:43
Just remove this line progressView = UIProgressView(progressViewStyle: .default) because you dont need to create it again , progress bar already created through your storyboard or xib file — Muhammad Shauket, Nov 08 '18 at 01:44
When removing that line I am now given the the error "Unexpectedly found nil while unwrapping an Optional value" on the line self.progressView.progress = Float(self.webView.estimatedProgress); — Nigel Denny, Nov 08 '18 at 01:53
it means your progressView is not set up correctly in storyboard check it may be your missiong iboutlet connection — Muhammad Shauket, Nov 08 '18 at 01:54
Just re-did the iboutlet connection and it still doesn't work — Nigel Denny, Nov 08 '18 at 01:57
check why progressView is nil ? it should not be nil, check his value in viewdidload — Muhammad Shauket, Nov 08 '18 at 02:00
set break point in viewdidload and see progress view should not be nil — Muhammad Shauket, Nov 08 '18 at 03:26

Muhammad Shauket · Accepted Answer · 2018-11-08T08:32:26.240

2

viewDidLoad( ) is called when the view has finished loading, while loadView( ) is called when the view starts loading. Move this code in ViewDidLoad

//progressView = UIProgressView(progressViewStyle: .default) // remove this line
progressView.sizeToFit()
progressView.progressTintColor = UIColor(red: 255/255, green: 204/255, blue: 0/255, alpha: 1.0)

Also no need to recreate webview. just delete webview from storyboard and create it programmatically and setup his constraint with container view. add container view in storyboard which start from progressbar till bottom of viewcontroller. add your webview in container view. i checked your code and update with fix. Download code

edited Nov 08 '18 at 08:32

answered Nov 08 '18 at 03:28

Muhammad Shauket

2,643
19
40

Moved the two lines down to viewDidLoad( ) and am still getting an unwrapping error. Also tried adding a breakpoint and it doesn't nil unless I allow it to reach progressView – Nigel Denny Nov 08 '18 at 04:15
whenever you reach to progressview it is nil ? – Muhammad Shauket Nov 08 '18 at 05:22
Yes. Perfectly fine until it gets to progressview – Nigel Denny Nov 08 '18 at 05:31
i can only fix if i got your code... should not be any issue if it is link correctly. – Muhammad Shauket Nov 08 '18 at 05:32
Here is a demo project https://drive.google.com/open?id=1CjR0cD47IW2Jar1gwO5-m9c7THkkhJRA Also while you're in there if you could help me add pull to refresh to my WKWebView I would greatly appreciate it. – Nigel Denny Nov 08 '18 at 05:52
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/183282/discussion-between-shauket-sheikh-and-nigel-denny). – Muhammad Shauket Nov 08 '18 at 07:46

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

It seems like you are adding the progress bar on the xib's view. However, you are also replacing this view in loadView() with WKWebView which seems to be why the progress bar becomes nil.

As a general rule, Apple states the following for loadView() method:

This method connects an instantiated view from a nib file to the view property of the view controller. This method is called by the system, and is exposed in this class so you can override it to add behavior immediately before or after nib loading.

Do not call this method. If you require this method to be called, access the view property.

Do not invoke this method from other objects unless you take care to avoid redundant invocations.

For your case, you might consider either of the following instead of performing the initializations on loadView():

Put initialization of webView in viewDidLoad() and then add both the webView and progressView as a subview to the view
Alternatively, you can also just add webView in the xib so you don't need to call view = webView and moving the additional webView and progressView configuration in viewDidLoad() instead.

Turning EstimatedProgress/ProgressView into progress bar in WKWebView

2 Answers2