iOS Tutorial: How to create a simple browser using WKWebView

WKWEbview-Web-browser-tutorial

Using a web view is not a new thing as we had UIWebView for the past many years. In the iOS version, 8.0 and earlier than 8.0, iOS app developers were using UIWebview class that embeds web content in an iOS app. UIWebview was a bit hefty, clumsy and leaked memory like a strainer. It started lagging after Mobile Safari, thus it couldn’t acquire the advantage of its faster JavaScript and interpreting engines.

However, when WKWebView came into existence in iOS 8.0, it is then that Apple degraded UIWebView and in its replacement, it launched a new framework known as WebKit. It contains WKWebView to allow iOS developers to load & display interactive web content within their apps.

WKWebview is the most important feature of the modern WebKit API which was introduced in iOS 8 & macOS. Moreover, WKWebview replaces UIWebView in UIKit and WebView in AppKit, offering a consistent API across the two platforms.

The objective of Using WKWebView to Develop a Simple Browser

Talking about WebKit, it is the layout and rendering engine behind Safari on OS X and iOS. It allows to parse and render HTML, load and display images, and execute JavaScript.

WKWebView is somewhere similar to UIWebView, but it is more enhanced and powerful than UIWebView. It has a different way of working with an application.

Further, WKWebview runs as a separate process instead of running within an app. The importance of WKWebView is beyond displaying simple web pages in an iOS app.

Advantages of using WKWebview

  1. WKWebView runs on a separate thread, which means separate memory is allocated to WKWebView. If WKWebView exceeds its memory, then it only crashes the webview but not the app.
  2. WKWebView uses the latest javascript engine and thus render the page faster as compared to older UIWebView javascript engine.

iOS has a few different ways of working with web views, but the one we’ll be using in this tutorial is called WKWebView. It’s part of the WebKit framework rather than the UIKit framework.

In this iOS app tutorial, we will create a web browser using the WKWebView object. A website will be loaded. This tutorial is made with Xcode 10.1 and built for iOS 12.1 using Swift Language Version 4.2.

Let’s Get Started

Step1: Create a Single View Application named SOBrowserApp and select Swift as the language

Create Single View Application Select the language

In ViewController.swift import the WebKit framework.

import WebKit

Step2: Now, add @IBOutlets for WKWebView

@IBOutlet var webView : WKWebView!

Step3: With that, we create a view in Main.storyboard with WKWebView, UIButton for “Next” and “Back” with Search (UITextField) option.
create a view in Main.storyboard

 @IBOutlet weak var searchButton: UIButton!
    @IBOutlet weak var btnBack: UIButton!
    @IBOutlet weak var btnNext: UIButton!
    
    @IBOutlet weak var searchTextField: UITextField!
	var myActivityIndicator = UIActivityIndicatorView()

Step4: In ViewDidLoad, create ActivityIndicator and set the observer for loading during the search from an app.

 //MARK: - Create Custom ActivityIndicator
        myActivityIndicator.center = self.view.center
        myActivityIndicator.style = .gray
        view.addSubview(myActivityIndicator)
        
        //Adding observer for show loading indicator
        self.webView.addObserver(self, forKeyPath:#keyPath(WKWebView.isLoading), options: .new, context: nil)

Step5: On Button “Go” click will call and btnSearchAction(_ sender: UIButton) and in which we are using google query Url for load searchable item/data in WKWebView.

//Mark: Search Using google query url
    @IBAction func btnSearchAction(_ sender: UIButton) {
        func searchTextOnGoogle(text: String){
            let textComponent = text.components(separatedBy: " ")
            let searchString = textComponent.joined(separator: "+")
            let url = URL(string: "https://www.google.com/search?q=" + searchString)
            let urlRequest = URLRequest(url: url!)
            webView.load(urlRequest)
        }
        if let urlString = searchTextField.text{
            if urlString.starts(with: "http://") || urlString.starts(with: "https://"){
                webView.loadUrl(string: urlString)
            }else if urlString.contains("www"){
                webView.loadUrl(string: "http://\(urlString)")
            }else{
                searchTextOnGoogle(text: urlString)
            }
        }
    }

Step6: For Button “Back” and “Next” handle in below functions

//Mark: Go previous page of Webview
    @IBAction func btnBackAction(_ sender: UIButton) {
        webView.goBack()
    }
    
    //Mark: Go next page of Webview
    @IBAction func btnNextAction(_ sender: Any) {
        webView.goForward()
    }

 

OutPut

 

Conclusion

WKWebView provides many features that were previously available in Safari only. It provides a 60fps responsive scrolling using hardware acceleration and Core Animation, fast JavaScript, and built-in gestures like back-forward swipe and zoom gestures from Safari. One of the major improvements of WKWebview over UIWebView is the ease of communication between an app-webpage, how interaction and data can be passed back and forth between an App and its web content.

Using the WKWebView helps in improving CPU performance by 3-4x on both older and newer iOS devices, while it does not affect GPU performance. WKWebView is likely to include new features in upcoming releases, as it already has IndexedDB storage support which was missing in UIWebView.

To download the source code for this iOS tutorial, you can refer to the github repository.

In case, if you have any query or confusion related to developing iPhone apps, then feel free to contact us as we are a leading iPhone app development company with an experienced team of iPhone app developers. Just fill this contact us form and we will get back to you as soon as possible.

This page was last edited on February 12th, 2019, at 8:51.
 
 

Have an App Idea?

Get your free consultation now