A blog all about iOS development, Swift tutorials, Xcode tutorials, and other technology related news and updates.


Tuesday, 10 April 2018

Web View Using WKWebView iOS Tutorial

WKWebView iOS Tutorial

Hi, In today's post, we'll learn how to use WKWebView or simply saying, how to implement web view in iOS applications. I am using Xcode 9 and Swift 4 for this tutorial. So, let's do it using our step by step approach:


Open Xcode and create a Single View Application.
Give some name to your app, eg. WebViewAppTutorial and make sure to choose Swift as the language, click Next.


Here, first we'll embed our app in a navigator controller. For this, just open your Main.storyboard and click on View Controller. Now, select Editor from Xcode Menu bar, and select Embed in > Navigation Controller.


Now, open ViewController.swift file and import webkit module.

import WebKit

Under your ViewController class , add the webView property as:

var webView: WKWebView!

Now, in your class declaration, add one WKNavigationDelegate protocol as shown below:

class ViewController: UIViewController, WKNavigationDelegate {


Add loadView() method in your View Controller:

    override func loadView() {
        webView = WKWebView()
        webView.navigationDelegate = self
        view = webView


Now, in viewDidLoad() method, add following lines of code:

    override func viewDidLoad() {
        //Add your web URL here that you want to show in app screen.
            let url = URL(string: "https://www.brewit9.com")!
            webView.load(URLRequest(url: url))
        // Add this to reload the web page using a item in the tool bar
            let refresh = UIBarButtonItem(barButtonSystemItem: .refresh, target: webView, action: #selector(webView.reload))
            toolbarItems = [refresh]
            navigationController?.isToolbarHidden = false


Now, Implement webView(:didFinish:) method:

    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        title = webView.title


This will add the website's title on the title bar when your website will be loaded in the app.

That's it, you can now run the app and web page will be displayed in the app instantly.

Web View in iOS
iOS Web View (www.brewit9.com)

UPDATE: Please note that, if your given URL (Line number: 26 ) is not having a secure connection means it uses http:// instead of https://, then your webpage won't load up in the iPhone and will give you an error something like "App transport security has blocked a..". So, to avoid this, we need to follow these steps:
  • Go To Info.plist
  • Click on + sign here

  • Enter App Transport Security Settings
  • Click on arrow sign and then + sign
  • Now, write Allow Arbitrary Loads and change its value from NO to YES

That’s it. After following above steps, just run your app and it won't give any error even with http:// URLs. 

Here's full code for your reference:

If you've any doubts or need any further help, then do message me in the comments section below and I'll try to respond you as soon as possible.

Thanks for your time and keep coding.. 👨‍💻

1 comment:

  1. This is such a nice post, I am glad to see this.
    Do you want to see your website or blog on Google's first page ??? And want to beat your website or blog ranking ?? Your website and blog will be displayed on the first page of Google through the SEO service, completely and beautifully. Get more visitors and earn money.

    Click this for more details :""SEO services provider""