Load local web files & resources in WKWebView Load local web files & resources in WKWebView swift swift

Load local web files & resources in WKWebView


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:

Xcode > File > Add Files to "Project"

☑️ 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 UIKitimport WebKitclass 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!


This work For Me:

        WKWebView *wkwebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, 1024, 768)];        wkwebView.navigationDelegate = self;        wkwebView.UIDelegate = self;        [wkwebView.configuration.preferences setValue:@"TRUE" forKey:@"allowFileAccessFromFileURLs"];        NSURL *url = [NSURL fileURLWithPath:YOURFILEPATH];        [wkwebView loadFileURL:url allowingReadAccessToURL:url.URLByDeletingLastPathComponent];        [self.view addSubview:wkwebView];


I was facing the same issue my condition was, I am downloading some HTML content from the server and save it to the Document directory and show it inside the application. The same controller uses the LIVE URL also I have to put the condition with url scheme. Tested on iOS 13 Xcode 11

  if Url.scheme == "file" as String {         wkWebView.loadFileURL(Url, allowingReadAccessTo: Url)    }    else {         let request = URLRequest.init(url: Url, cachePolicy:.reloadIgnoringLocalCacheData, timeoutInterval:60)         wkWebView.load(request)    }

it worked perfect for me