WKWebView on device can't load cached HTML

Question

I have a WKWebView that works in Simulator perfectly but why runs in the device only a white empty screen appear this is my code:

override func loadView() {
    let webConfiguration = WKWebViewConfiguration()
    webConfiguration.preferences.setValue(true, forKey:"allowFileAccessFromFileURLs")
    webView = WKWebView(frame: .zero, configuration: webConfiguration)
    webView.uiDelegate = self
    view = webView
}

override func viewDidLoad() {
    super.viewDidLoad()

    let path2Esferas = Path.localPath.stringByAppendingPathComponent(path: "\(Path.DIR_IMAGES)\(ImagenDescargaTipo.esfera.rawValue)/\(desarrollo.id)/virtualtour.html")
    let url =  URL(fileURLWithPath: path2Esferas) 
    //NSURL.fileURL(withPath: path2Esferas)

    let myRequest = URLRequest(url: url)
    webView.load(myRequest)
}

The HTML in "path2Esferas" is in a cache's folder that I load previously, if I put a different URL like let myURL = URL(string: "https://www.apple.com") as docs show, it works correctly in simulator and device. Eg: http://proyectoshm.com/esferas/real_de_mina/realdeminas.html

Answer 1

INTRO

My solution is NOT solving the full problem.

I leave it here temporary might be useful for understanding (mostly from our comments below) what did not work.

---

import UIKit
import WebKit

class ViewController: UIViewController {
  var webView:WKWebView?

  override func viewDidLoad() {
    super.viewDidLoad()

    let webConfiguration = WKWebViewConfiguration()
    self.webView = WKWebView(frame: self.view.frame, configuration: webConfiguration)
    // http request with URLRequest.CachePolicy.returnCacheDataElseLoad
    let request = URLRequest(url: URL(string:"http://proyectoshm.com/esferas/real_de_mina/realdeminas.html")!, cachePolicy: URLRequest.CachePolicy.returnCacheDataElseLoad, timeoutInterval: 10)
    self.webView?.load(request)
    self.view.addSubview(self.webView!)
  }
}

I also added into the plist:

App Transport Security Settings > Allow Arbitrary Loads in Web Content > YES App Transport Security Settings > Allow Arbitrary Loads > YES

eventually to be able to submit on the store your app, you will have some trouble since:

Apple announced that ATS will be REQUIRED of all apps as of January 2017.

https://forums.developer.apple.com/thread/48979

result is:

Answer 2

The problem is this phrase:

frame: .zero

Supply some frame, even if it is a dummy value:

frame: CGRect(x:0, y:0, width:100, height:100)

Answer 3

If I've understand from comments and from your code (Path.localPath should be related to your local resources..) you have to do with local files. I remember it should be related to your wrong method to load the local resource to the WkWebView. In fact , since iOS 9.0+, as explained to the docs you can use the instance method loadFileURL(_:allowingReadAccessTo:)

You should also try with loadHTMLString:

let path2Esferas = Path.localPath.stringByAppendingPathComponent(path: "\(Path.DIR_IMAGES)\(ImagenDescargaTipo.esfera.rawValue)/\(desarrollo.id)/virtualtour.html")
let folderPath = Path.localPath.stringByAppendingPathComponent(path: "\(Path.DIR_IMAGES)\(ImagenDescargaTipo.esfera.rawValue)/\(desarrollo.id)")
let baseUrl = URL(fileURLWithPath: folderPath, isDirectory: true)
do {
     let htmlString = try NSString(contentsOfFile: htmlPath!, encoding: String.Encoding.utf8.rawValue)
     webView.loadHTMLString(htmlString as String, baseURL: baseUrl)
} catch {
  // catch error
}

P.S. Be sure that your local html/JavaScript/CSS files added in Project -> Target -> Build Phases -> Copy Bundle Resources

Anyway, remember you can load your local resources only after their download was completed, so if you have an asynchronous download be sure you have finish it to use this code.

Answer 4

Instead of hacking WKWebViewConfiguration with setting private API flag allowFileAccessFromFileURLs, try loading a file URL with a special file URL method:

self.webView?.loadFileURL(url, allowingReadAccessToURL: url.deletingLastPathComponent)

Answer 5

Have you tried changing your line

let myRequest = URLRequest(url: url)

to

let myRequest = URLRequest(url: url, cachePolicy: .reloadIgnoringCacheData, timeoutInterval: 100)

Answer 6

Please check your network connection, if you are a different network with html file you can not see anything

Answer 7

After more than 1 year I found the solution, we need to use loadFileURL to have access to the local resources, here is my working code with WKWebView, plus instead of load I use loadHTMLString. vistaweb in my WebView BTW

Thanks to this answer : Load local web files & resources in WKWebView

        do {

            let local = NSSearchPathForDirectoriesInDomains(.cachesDirectory, .userDomainMask, true)[0]
            // Loading: Library/Caches/repositorioLocal/esferas/znvUifZhH8mIDr09cX8j/index.html
            let resourceFolder = "repositorioLocal/esferas/znvUifZhH8mIDr09cX8j"
            let fileToLoad = "index.html"

            let urlToFolder = URL(fileURLWithPath: local).appendingPathComponent(resourceFolder)
            let urlToFile =  URL(fileURLWithPath: local).appendingPathComponent(resourceFolder).appendingPathComponent(fileToLoad)
            let fileContent = try String(contentsOf: urlToFile)

            let webConfiguration = WKWebViewConfiguration()
            webConfiguration.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs")
            webConfiguration.allowsInlineMediaPlayback = true

            vistaweb = WKWebView(frame: self.view.frame, configuration: webConfiguration)
            self.vistaweb.loadFileURL(urlToFolder, allowingReadAccessTo: urlToFolder)
            self.vistaweb.loadHTMLString(fileContent, baseURL: urlToFile)
            self.view.addSubview(vistaweb)

        } catch let error {
            print("Error: \(error.localizedDescription)")
        }