Load local web files & resources in WKWebView

Question

Unlike with UIWebView and previous versions of WKWebView (iOS 10 & macOS 10.12), the default load operation for local files has moved from Bundle.main.path

Answer 1

Updated for Swift 4, Xcode 9.3

---

This methods allows WKWebView to properly read your hierarchy of directories and sub-directories for linked CSS, JS and most other files. You do NOT need to change your HTML, CSS or JS code.

Solution (Quick)

1. Add the web folder to your project (File > Add Files to Project)
   • Copy items if needed
   • Create folder references *
   • Add to targets (that are applicable)

2. Add the following code to the viewDidLoad and personalize it to your needs:

   let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "website")!
   webView.loadFileURL(url, allowingReadAccessTo: url)
   let request = URLRequest(url: url)
   webView.load(request)
   

---

Solution (In-Depth)

Step 1

Import the folder of local web files anywhere into your project. Make sure that you:

☑️ Copy items if needed

☑️ Create folder references (not "Create groups")

☑️ Add to targets

Step 2

Go to the View Controller with the WKWebView and add the following code to the viewDidLoad method:

let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "website")!
webView.loadFileURL(url, allowingReadAccessTo: url)
let request = URLRequest(url: url)
webView.load(request)

• index – the name of the file to load (without the .html extension)
• website – the name of your web folder (index.html should be at the root of this directory)

Conclusion

The overall code should look something like this:

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {

    @IBOutlet weak var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        webView.uiDelegate = self
        webView.navigationDelegate = self

        let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "Website")!
        webView.loadFileURL(url, allowingReadAccessTo: url)
        let request = URLRequest(url: url)
        webView.load(request)
    }

}

If any of you have further questions about this method or the code, I'll do my best to answer!