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
to Bundle.main.url
. Similarly, loadFileURL
has also become the default function to load local resources in WKWebView.
I know that .path
and .url
are entirely different and have both worked in the past – .path
historically being the default-chosen method; however, it seems that the latest versions of Swift have broken most, if not all, .path
solutions. The .path
solutions seem to now flatten the directory hierarchy, putting all of the CSS, JS, and any other sub-directory contents, into one big directory. This causes loading errors when WKWebView attempts to load index.html, for example, with a linked, sub-folder stylesheet (ie. /css/style.css
).
After seeing numerous questions and countless uncertain/broken answers to match, is there a quick and painless solution for implementing a WKWebView that can load local resources (including linked CSS/JS files), without any workarounds?
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.
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)
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
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)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!