12 Aug 2018

Swift tutorial: How to load web page using WKWebView in swift

Tutorial on WKWebView in Swift 4

Introduction to WKWebView 

WKWebView comes into existence in iOS 8.0, when Apple deprecated UIWebView and in its replacement launches new framework known as WebKit which contains WKWebView to allow developers load web page inside their apps. WKWebView is somewhat similar to UIWebView but is more enhanced and powerful than UIWebView.


Advantages of using WKWebView

  1. WKWebView runs on separate thread, this means separate memory is allocated to WKWebView, thus if WKWebView exceeds its memory then it only crash webview but bot the app.
     
  2. WKWebView uses latest javascript engine and thus render the page faster as compared to older UIWebView javascript engine.
There are many more advantages of WKWebView but above two are important one in perspective of
app developer.

 

How to use WKWebView in swift 4

Step 1: Create a single View application template project and name it "WKWEbView-Demo". Open 
ViewController.swift.

Step 2: Import WebKit framework on top of your class declaration, and create two IBOutlet's for
1) WKWebView :- loads our web page
2) UIActivityIndicatorView: Show activity indicator when our web page is loading and gets hidden once webview finish loading web page.


Step 3: Open Main.storyboard file, and drag "Web Kit View" and UIActiVityIndicatorView to ViewController's view. Add constratints to webview and activity indicator as shown in below images.

WKWebView Constraints: All four (top, leading, trailing, bottom) sets to zero i.e. with respect to safe area.

WKWebView in swift  


UIActivityIndicatorView Constraints: Aligned centered (vertically and horizontally) with respect to superview.

WKWebView in swift

Step 4: Connect IBOutlets created in step 2 to respective controls i.e. web view and  activity indicator view.
Step 5: Open ViewController.swift file and lets start loading webpage to our WKWebView in swift. Inside our viewDidLoad function add following source code

If you run the app, you will see nothing will happen. We have to add app transport policy in info.plist file

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>


After adding keys to info.plist, run the app again and you will see web page, i.e. apple website gets loaded but activity indicator is still animating. WKWebView does not offer delegate methods like UIWebView to let us know that when weview starts loading the page and when webview stops loading. To solve this problem, we need to take use of isLoading property which a KVO compliant in WKWebView, it means that its isLoading is a KVO property and will transmit notification whenever the value of isLoading property of WKWebView gets changed,

 

Detect WKWebView start and stop loading events for url or web page

 If we want to detect start and stop events of WKWebView, then we have to add our class where WKWebView is declared as key value observer for WKWebView property isLoading. Below is the code that shows how to add a class as an observer for KVO compliant property. Inside viewDidLoad function add below line code just above the closing brace of our viewDidLoad function.


Implementing NSKeyValueObserving function

Lastly, we need to implement key value observing function so that when ever isLoading property of WKWebView chnages we get the callback in this function and perform our desired actions. Below is the code to start  activityindicator when page starts loading and hide when webview stops loading.


Where to go from here

In this tutorial, we learned about WKWebView replacement of UIWebView and how to load an url in WKWebView. Also we learned how to use KVO property isLoading of WKWebView to detect loading events of WKWebView. 



No comments:

Post a Comment