How to replace WKWebView response with internal resource files?

Question

I have a WKWebView that present an HTML file from the project resource files. Along with the resource files there are CSS and JavaScript files for the web view to use.

Side note: These web files are for a compiled React web app. CSS / JS files are referenced within the index.html file like so <link href="/static/css/styles.css" rel="stylesheet"> and <script src="/static/js/code.js"></script> , as well as an inline block of JavaScript e.g <script> /* some code here */ </script>

I was asked to intercept the web view’s requests and replace the response with the resources within the project files.

I’ve read and followed Vikash’s answer on Intercept request with WKWebView I managed to see the requests, I got the URL path for the CSS / JS files from the requests, I created a new URLResponse but nothing made the web view display it. The code below is from the other SO question, that represent the extension of our ViewController to WKURLSchemeHandler. In start urlSchemeTask function I got the URL for the file, created a new URLResponse and put it inside the urlSchemeTask delegate methods, that just did nothing. (edited)

The code below is from the other SO question, that represent the extension of our ViewController to WKURLSchemeHandler. In start urlSchemeTask function I got the URL for the file, created a new URLResponse and put it inside the urlSchemeTask delegate methods, that just did nothing.

func webView(_ webView: WKWebView, start urlSchemeTask: WKURLSchemeTask) {
    print("Function: \(#function), line: \(#line)")
    print("==> \(urlSchemeTask.request.url?.absoluteString ?? "")\n")
// You can find the url pattern by using urlSchemeTask.request.url. and create NSData from your local resource and send the data using 3 delegate method like done below.
// You can also call server api from this native code and return the data to the task.
// You can also cache the data coming from server and use it during offline access of this html.
// When you are returning html the the mime type should be 'text/html'. When you are trying to return Json data then we should change the mime type to 'application/json'.
// For returning json data you need to return NSHTTPURLResponse which has base classs of NSURLResponse with status code 200. 
// Handle WKURLSchemeTask delegate methods
    let url = changeURLScheme(newScheme: "file", forURL: urlSchemeTask.request.url!)
    do {
        let data = try Data(contentsOf: url)
        urlSchemeTask.didReceive(URLResponse(url: urlSchemeTask.request.url!, mimeType: "text/html", expectedContentLength: data.count, textEncodingName: nil))
        urlSchemeTask.didReceive(data)
        urlSchemeTask.didFinish()
    } catch {
        print("Unexpected error when get data from URL: \(url)")
    }
}
func webView(_ webView: WKWebView, stop urlSchemeTask: WKURLSchemeTask) {
    print("Function: \(#function), line: \(#line)")
    print("==> \(urlSchemeTask.request.url?.absoluteString ?? "")\n")
}

I've searched the web a lot and couldn't find a proper solution to this.

Looking forward to hear more solutions!

How to replace WKWebView response with internal resource files?

0 Answers0