What's the difference between UIWebView and WKWebView when loading local resources - ios

I want to load local resources with webView. I built a demo with both UIWebView and WKWebView to do some test with the code below.
let uiWebView = UIWebView(frame: self.view.bounds)
self.view.addSubview(uiWebView)
let wkWebView = WKWebView(frame:CGRect(x: 0, y: 400, width: 500, height: 500))
self.view.addSubview(wkWebView)
let path = Bundle.main.path(forResource:"1", ofType: "png")
guard let realPath = path else {
return
}
let url = URL(string: realPath)
let fileUrl = URL(fileURLWithPath: realPath)
if let realUrl = url {
uiWebView.loadRequest(URLRequest(url:realUrl))
wkWebView.load(URLRequest(url:realUrl))
}
// uiWebView.loadRequest(URLRequest(url:fileUrl))
// wkWebView.load(URLRequest(url:fileUrl))
The uiWebView can load the resource but wkWebView can not. But if I use
uiWebView.loadRequest(URLRequest(url:fileUrl))
wkWebView.load(URLRequest(url:fileUrl))
both uiWebView and wkWebView can work well.
I am confused and can anyone explain that for me:
Shouldn't I use URL(string: realPath) for a local resource? But why UIWebView can use it ?

A couple points:
Apple recommends that you use WKWebview for iOS 8 and later. I would avoid writing new code with UIWebView.
In apps that run in iOS 8 and later, use the WKWebView class instead of using UIWebView. Additionally, consider setting the WKPreferences property javaScriptEnabled to false if you render files that are not supposed to run JavaScript.
Apple has been trying to move away from path and instead wants to use URI even for local files. They recommend that you NOT use /path/to/file.png and use file:///path/to/file.png instead.
As to why one URL works and the other does not, let's make a minimal example:
let realPath = "/path/to/file.png"
let url = URL(string: realPath) // /path/to/file.png
let fileUrl = URL(fileURLWithPath: realPath) // file:///path/to/file.png
url does not provide the scheme (a.k.a protocol). It should only be used in conjunction with another URL to give the absolute address of the resource you are trying to reach. UIWebView supports it for backwards-compatibility reasons but Apple decided to start clean with WKWebView.
fileURL has a scheme (file://) that tells the resource is located on the local file system. Other common schemes are http, https, ftp, etc. It's a complete address to a resource so both views know how to resolve it.

This might be for security reasons, or just how the WKWebView API was implemented.
WKWebView has a specific instance method for loading local resources called loadFileURL(_:allowingReadAccessTo:). This was introduced in iOS 9.
Note
If you are targeting iOS 8.0 or newer, you should be using WKWebView instead of UIWebView. See: https://developer.apple.com/reference/webkit/wkwebview

Related

How to load a file path as URL to view it on wkwebview in Swift?

I have an epub file in the project and I would like to open it with in the application i have tried using "EpubExtractor" pod but no use.
Now I am trying to achive that if i can use the path to view that file on the webview.
guard let resourceUrl = Bundle.main.url(forResource: "Sway",withExtension: "epub") else {return}
webView.loadFileURL(resourceUrl,allowingReadAccessTo: resourceUrl)
path I am getting.
file:///Users/apple/Library/Developer/CoreSimulator/Devices/4203B9E1-E3A4-4636-8750-E5340AAD51ED/data/Containers/Bundle/Application/F3BF662A-34AD-44C0-AFD9-E4BB7AD74551/EpubWebView.app/Sway.epub
When I am using the above code i am not able to view anything on the webview as it gives me an error "not able to load in webview"
ePub format is not supported by the WKWebView framework. You can search Apple or webkit.org to see the core features of WKWebView

Why will be removed url from deserialized WKWebView

I'm developing a browser app. I'd like to restore WKWebView object when app is restarted. So I serialized WKWebView object and saved to Realm. But When I deserialized WKWebView object, the data of url and backList was losted from WKWebView.
let WebView = WKWebView()
WebView.frame = CGRect(x: 0, y: 0, width:300, height:650)
let urlString = "http://www.google.com"
let encodedUrlString = urlString.addingPercentEncoding(withAllowedCharacters:NSCharacterSet.urlQueryAllowed)
let url = NSURL(string: encodedUrlString!)
let request = NSURLRequest(url: url! as URL)
WebView.load(request as URLRequest)
let serialized_WebView = NSKeyedArchiver.archivedData(withRootObject: WebView) as NSData //convert to NSData
let deserialized_WebView = NSKeyedUnarchiver.unarchiveObject(with: serialized_WebView as! Data) as! WKWebView
print("frame",deserialized_WebView.frame) // frame (0.0, 0.0, 300.0, 650.0)
print("url",deserialized_WebView.url) // url nil
print("backList",deserialized_WebView.backForwardList.backList) // backList []
I'd like to restore not only url but backList as a part of WKWebView object. I do not want to do implement unique function of save backList if possible.
Any advice please.
I've honestly never seen anyone encode a view like this before. Generally speaking, views' conformance to NSCoding is intended for use by Interface Builder and any properties that can be set will probably be exposed there.
Looking in Interface Builder, the serialized properties are navigation gestures, user agent, link preview and a bunch of properties of WKWebViewConfiguration. I've confirmed in a breakpoint that this is all it encode.
The backList represents the state of the view at a given time and were it encoded it would be in WKWebView.encodeRestorableState(with:) for use in UIKit's state restoration process. Unfortunately, this method is not implemented and no state is saved. In this answer, matt recommends using UIWebView if you want to reconstruct history in a web view.
Another, more complex approach is what FireFox for iOS does. They do successfully restore history in a WKWebView using a trick with a custom web request server and a web page that injects URLs into the history via JavaScript's history.pushState. The relevant bits of code are:
Tab.restore(_:WKWebView): Their code which takes an array of URLs and hands things off to their local web server.
SessionRestoreHandler: The request handler for their local web server which returns the web page.
SessionRestore.html: The file served by the request handler, which injects the history with JavaScript.
This approach may work for one of the major players in the browser space, but it's probably not worth the trouble for most apps. I personally would recommend just sticking with a UIWebView and state restoration like matt suggested.

How to open a document URL in default ios APP using Swft 3?

I have a url document url list in a TableViewController` like this one
https://lists.w3.org/Archives/Public/uri/2004Nov/att-0015/App-Note-UseOfTheFileURLInJDF-031111.doc
and on TableViewCell selection this doc file should open in any default viewer that is not part my app, So I can do achieve this ? Is this possible or any suggestion.
Working with Quick​Look Framework should satisfied your requirement.
As mentioned at "Using the Quick Look Framework":
A Quick Look preview controller can display previews for the following
items:
iWork documents
Microsoft Office documents (Office ‘97 and newer)
Rich Text Format (RTF) documents
PDF files
Images
Text files whose uniform type identifier (UTI) conforms to the public.text type
Comma-separated value (csv) files
You can find many of articles about working with QuickLook Framework; You might want to check the following one:
Using Quick Look Framework for Previewing Documents.
Also, checking this repo (GitHub) might be useful.
Hope this helped.
Use UIWebView class to open the given URL.
Method 1:
let webView = UIWebView(frame: self.view.frame)
webView.scalesPageToFit = true
view.addSubview(webView)
let urlS = "https://lists.w3.org/Archives/Public/uri/2004Nov/att-0015/App-Note-UseOfTheFileURLInJDF-031111.doc"
let url = URL(string: urlS)
let request = URLRequest(url: url!)
webView.loadRequest(request)
Method 2:
With this method, you'll get nice ToolBar items, which you can customize based on your requirement.
Using UIWebView library for Swift, SwiftWebView:
If you're using UINavigationController:
let urlS = "https://lists.w3.org/Archives/Public/uri/2004Nov/att-0015/App-Note-UseOfTheFileURLInJDF-031111.doc"
let webVC = SwiftWebVC(urlString: urlS)
self.navigationController?.pushViewController(webVC, animated: true)
OR
If you want to present Modally:
let urlS = "https://lists.w3.org/Archives/Public/uri/2004Nov/att-0015/App-Note-UseOfTheFileURLInJDF-031111.doc"
let webVC = SwiftModalWebVC(urlString: urlS)
self.present(webVC, animated: true, completion: nil)

WKWebView fails to load images and CSS using loadHTMLString(_, baseURL:)

Apple's recommendation:
In apps that run in iOS 8 and later, use the WKWebView class instead of using UIWebView.
Thus, I have replaced my good old UIWebView with a shiny new WKWebView. But what I thought to be an easy exercise (simply swapping the classes and replacing the delegate methods) turned out to be a real mess.
The Problem
When I load an HTML string using
loadHTMLString(String, baseURL: URL?)
the web view loads and renders the pure HTML but it doesn't load any images or CSS files referenced inside the htmlString.
This happens only on a real device!
In Simultor all referenced resources are loaded correctly.
Example
I have defined a simple htmlString in my view controller class:
let imageName = "image.png"
let libraryURL: URL // The default Library URL
var htmlString: String {
return "<html> ... <img src=\"\(imageName)\" /> ... </html>"
// "..." represents more valid HTML code incl. header and body tags
}
The image is stored in the root Library folder so its URL is:
let imageURL = libraryURL.appendingPathComponent(imageName)
Now I load the htmlString into the web view:
webView.loadHTMLString(htmlString, baseURL: libraryURL)
and it doesn't load the image even though the baseURL is set correctly.
Ideas for a Solution
Maybe WKWebView has a problem with resolving relative paths so my first idea was to use absolute paths inside the HTML string instead.
→ ❌ Doesn't work.
Two answers to another SO post suggested that using
loadFileURL(URL, allowingReadAccessTo: URL)
instead of loadHTMLString(...) works in iOS 9+.
→ ✅ That works.
However, I cannot use solution 2 because my HTML files are encrypted and the decrypted files must not be stored on the disk.
Question
Is there any way to load local resources like images and styles using the WKWebView's
loadHTMLString(String, baseURL: URL?)
function? Or is still a bug in iOS 9+?
(I just cannot believe that Apple provides and recommends using a web view that cannot load any local web content from inside an HTML string?!)
Without taking a look at your actual project it's difficult to give some hundreed percent sure advices.
However:
class ViewController: UIViewController {
var webView = WKWebView()
override func viewDidLoad() {
super.viewDidLoad()
webView.translatesAutoresizingMaskIntoConstraints = false
let views = [
"webView" : webView
]
view.addSubview(webView)
var constraints = NSLayoutConstraint.constraintsWithVisualFormat("H:|[webView]|", options: [.AlignAllLeading, .AlignAllTrailing], metrics: nil, views: views)
constraints.appendContentsOf(NSLayoutConstraint.constraintsWithVisualFormat("V:|[webView]|", options: [.AlignAllTop, .AlignAllBottom], metrics: nil, views: views))
NSLayoutConstraint.activateConstraints(constraints)
let path = NSBundle.mainBundle().pathForResource("ios - WKWebView fails to load images and CSS using loadHTMLString(_, baseURL_) - Stack Overflow", ofType: "htm")
let url = NSURL(fileURLWithPath: path!)
webView.loadHTMLString(try! String(contentsOfURL: url), baseURL: url.URLByDeletingLastPathComponent)
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
I think the key point here is baseUrl parameter, you should setup it correctly. In my case i've used html's url without last path component - e.g. containing folder. This works fine on both device & simulator - check device snapshot. I've uploaded sample project to https://github.com/soxjke/WKWebViewTest so you can take a look (i've removed codesigning info from git)
So, to recap - method is working, functionality is working, just you do something wrong with it. To help you get what's wrong with your solutions, i'll add some suggestions:
1. Remember, that simulator filesystem is case-insensitive, device filesystem is case-sensitive. So if you have your filenames in html in lowercase - this won't work on device. 8fFsD.png != 8ffsd.png
2. Remember, that when copying resources, XCode ignores your folder structure. So if your html has <img src="./img/1.png"> and your XCOde project has folder structure like
test.htm
img/
1.png
2.png
After build it will be flattened, so test.htm and 1.png and 2.png will reside on same level
test.htm
1.png
2.png
I'm almost sure, after you verify these two assumptions, you'll get this method working.
I had this problem today, I've found the solution and potentially the cause:
loadHTMLString(String, baseURL: URL?)
This function doesn't allow the rendered HTML to access local media, as far as I'm aware, this is because it would be an injection risk, this could allow rendered HTML to access and manipulate your local file system. With a html string, that could come from anywhere or anyone.
loadFileURL(URL, allowingReadAccessTo: URL)
With this function, you point the WKWebview to the html file in your FileManager, and to the containing folder with 'allowingReadAccessTo'. Because the html is stored within the FileManager, it will allow the rendered HTML to access locally stored media.
If you don't have the html file stored locally for some reason(I assume you do), You could write the html sting into a .html file, then point to the URL of that file. However, this is just subverting Apple's protection, so do it at your own peril (don't do it).
This is just the solution that worked for me and my understanding of why we're having the problem to begin with.
Edit #1: Typo.
Edit #2: I've since found another nuance, When stating the 'allowingReadAccessTo:' URL, if the HTML itself needs to access things in parent folders (ie: .css, .js files), you need to specify the parent folder, not necessarily the location of the HTML itself, this will then implicitly allow access to the child folders as required also. For me, this problem was only apparent on a physical device, this didn't seem to have an effect whilst running in simulator, likely another discrepancy between how permissions work on simulator and a physical device.
Personally, I had to switch to using XWebView as the out-of-the-box behavior of WKWebView does not allow loading of local files. XWebView tricks it by loading up a local web server in the background and directing local traffic thru it. (XWebView is based on top of WKWebView)
Seems a bit overkill, but that is what I ended up having to do.
I've been experimenting with this as well, with similar restrictions, and the problem appears to be that paths aren't resolved unless baseURL references the application bundle. It doesn't work if you, for example, have something in the application's documents.
Edit: I have filed a radar for this rdar://29130863
Well you should be able to use local images and CSS files (and JavaScript files for that matter) with WKWebViews with the function that you have already found. My guess is that the problem is with your baseURL variable.
Update 7.5.2017:
I have completely updated the code from another SO answer of mine that used to be linked to my answer here. I have a working project for loadHTMLString() and .loadFileURL()
Try to create baseURL using:
let baseURL = URL(fileURLWithPath: "#path#")
instead of:
let baseURL = URL(string: "#path#")
The main difference is that the first method adds file:// prefix before the path.
You can base64 encode the images... I know that works. Not sure if it will be appropriate for your use case though.
Kind of funny, I just ran into this problem while doing the opposite - moving from base64 encoded to image files.
When I used UIWebview, I used baseURL as,
let baseUrl = NSURL(string: Bundle.main.path(forResource: "cms", ofType: "html")!)! as URL
webView.loadHTMLString(bodyPage, baseURL: baseUrl)
But for the WKWebView, I used baseURL as
let baseUrl = Bundle.main.bundleURL
webView.loadHTMLString(bodyPage, baseURL: baseUrl)
This works for me.
I know this is quite old already, but I ran into the exact same problem and it took me hours of trials and even to find this thread with the same problem (Xamarin Forms App)
My issue was: parsing remote HTML content into a string and also adding locally saved images (also downloaded dynamically, no resource of the app). On the simulator all works well, but on acutal device the local images are not showing (also no ? or anything indicating an error, just a blank frame). The Xamarin webview also offers the "BaseURL" option which didn't help, also not to use the BaseURL on the custom iOS wkWebView.
The only working solution as pointed out by Scott above, is to write the HTML into a file and then use the "LoadFileUrl" function and allow read access to the base directory. This also works with absolute file paths for images in the HTML (not only relative to the basedir, but of course somewhere within the basedir).
My custom webview renderer to load web and local content looks like this now:
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e) {
base.OnElementPropertyChanged(sender, e);
NSUrl baseURL = new NSUrl(App.dirNews, true);
string viewFile = Path.Combine(App.dirNews, "view.html");
NSUrl fileURL = new NSUrl(viewFile, false);
switch (e.PropertyName) {
case "Url":
System.Console.WriteLine("--- Loading Web page ---");
System.Console.WriteLine("--- " + Element.Url + " ---");
NSUrlRequest myRequest = new NSUrlRequest(new NSUrl(Element.Url), NSUrlRequestCachePolicy.ReloadIgnoringLocalAndRemoteCacheData, 120);
Control.LoadRequest(myRequest);
break;
case "HTML":
System.Console.WriteLine("--- Showing HTTP content ---");
File.WriteAllText(viewFile, Element.HTML, System.Text.Encoding.UTF8);
Control.LoadFileUrl(fileURL, baseURL);
break;
}
}
I was able to reproduce a similar issue. WKWebView loads my images specially if they are located remotely, apart from my app server.
For servers that are not SSL-secured (http instead of https), you can set your info.plist as per below:
App Transport Security Settings
- Allow Arbitrary Loads in Web Content (Set to YES)
- Allow Arbitrary Loads (Set to YES)
The problem was actually in the server. The server application was either:
Changing the image src from "http://IP-or-domain/uploads/file.jpg" to "../../uploads/file.jpg"
- OR -
The image src was "http://localhost/uploads/file.jpg" or "http://127.0.0.1/uploads/file.jpg" instead of "http://YOUR-SERVER-IP-ADDRESS/uploads/file.jpg"
In these cases, the actual device wont be able to locate the image. This only works with iOS Simulator because the virtual device is the same as the server and development machine. It can read LOCALHOST and 127.0.0.1.
In my server, I was using a Rich Text Editor (TinyMCE) and it automatically removes the IP address after it detects that it's the same source.
WKWebView can load image or css file from NSTemporaryDirectory, so you can copy your files to NSTemporaryDirectory, and then load it. It works for me on iOS 14! see this issue. ios-wkwebview-loadhtmlstring-baseurl-fails-to-load-images-and-read-css
It took me a while to figure this out, but based on this answer I got it working:
https://stackoverflow.com/a/73519282/5868066
Try this:
let htmlPath = URL(fileURLWithPath: "")
let htmlDirectory = htmlPath.deletingLastPathComponent()
let htmlString = try! String(contentsOfFile: htmlPath.path, encoding: .utf8)
let baseURL = URL(fileURLWithPath: htmlDirectory)
let documentsDirectory = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)[.zero]
webView.loadFileURL(htmlPath, allowingReadAccessTo: documentsDirectory)
webView.loadHTMLString(htmlString, baseURL: baseURL)

Swift WKWebView Loading local file not working on a device

I am having some issues when trying to run my app on an iPad (or any device) it runs as expected on the emulator so it is weird that it doesn't work on a device. I was wondering if some one could point me in the correct direction. I spend many hours reading all the other posts on here about the same issues, however none of the suggested solutions worked.
I have a WKWebView into which I am loading a local html file. On the emulator the file loads and everything works fine but on a device I am getting a message in the log:
Could not create a sandbox extension for '/'
Here is the code I have that loads the file into the
override func viewDidLoad() {
super.viewDidLoad()
var path = NSBundle.mainBundle().pathForResource("Login_UK",
ofType: "html")
var url = NSURL(fileURLWithPath: path!)
var request = NSURLRequest(URL: url!)
var theConfiguration = WKWebViewConfiguration()
theConfiguration.userContentController.addScriptMessageHandler(self,
name: "callbackHandler")
webView = WKWebView(frame: self.view.frame,
configuration: theConfiguration)
webView!.loadRequest(request)
self.view.addSubview(webView!)
}
Any help will be greatly appreciated
Kind Regards,
Dimitar
Thank you for any one who tried to answer my question. I have released that this is an error with the WebKit lib that Apple are trying to fix. However I have found a good workaround that required little work.
I open the local file and read its content and then send that string into a webView.loadHTMLString method that compiles the hmtl that was in the file. That way you avoid the issues with iOS not being able to find the path to the local file.
Here is an example of reading a file and then opening it for any one who has the same issues:
let path2 = NSBundle.mainBundle().pathForResource("index", ofType: "html")
var text = String(contentsOfFile: path2!, encoding: NSUTF8StringEncoding, error: nil)!
webView!.loadHTMLString(text, baseURL: url)
Kind regards,
Dimitar
Just do this:
if url.isFileURL {
webView.loadFileURL(url, allowingReadAccessTo: url)
} else {
let request = URLRequest(url: url)
webView.load(request)
}
There is a function loadFileURL on the WKWebView starting iOS 9 that apparently has to be used when reading data from a file URL.
Strange enough using the load function with an URLRequest for the file URL does work in the simulators, but not on device - the web view stays blank on the device. Using the loadFileURL works on device and the simulator.
Using loadHTMLString unfortunately introduces another problem (local anchors that jump to another position in the same web view are not working anymore) and probably should be avoided until Apple releases a fix for that issue.
Actually the problem is caused by the webView.load() function, if we test it on simulators it will work perfectly, but for the real device it may cause some problems and it will not load the webview perfectly. You may check it by calling the didFinish() function.
What you need to do is call webView.loadFileURL() rather than webView.load(). It will work in both simulators and real devices. This is very useful when you load any file from the local file directory.

Resources