Has anyone attempted to render a WKWebView in a background or invisible UIView so that it’s visible immediately upon first presentation, and if so, what technique did you use?
Background:
We are trying to embed a WKWebView in our UI that renders seamlessly next to native UI. We are going to download a .ZIP file, unzip it locally to disk, and then point the WKWebView to that local file. However, when testing this solution on an iOS simulator (running iOS 17.5), we see a flash of white – specifically there is no content rendered for the first moment or two, followed by content appearing.
We have tried attaching the WKWebView to the UIWindow, adding a javascript callback for the onReadyStateChange “loaded” event, and then only proceeding to present our UIViewController containing our WKWebView afterwards, but we still see a moment with no content being rendered at all. If we add a delay using DispatchQueue.asyncAfter of approximately one second (anything less still flashes), our content does seem to be correctly rendered in the background and immediately visible when the UIViewController gets presented.
This is a problem that was originally asked nearly 11 years ago (https://stackoverflow.com/questions/15669809/how-to-prevent-initial-white-flash-when-showing-a-uiwebview); and the agreed upon solution there seems to be to set the background to be not opaque, but the issue remains that the content isn’t immediately visible. Google Gemini and ChatGPT have proposed a number of solutions, including hallucinations about headless WKWebView support on iOS, but unfortunately we are unable to achieve a solution without a DispatchQueue delay with a magic number.
petrpss
Users receive reputation points by contributing quality content to the forums.
Posts include post and replies published on the forums.
Post authors can mark replies as Accepted to indicate successful solutions.
Apple Developer Forums admins can mark replies as Apple Recommended to indicate an approved solution
Post
Replies
Boosts
Views
Activity
Has anyone else been experiencing this? We can see user feedback in app store connect, complaining about crashes for the latest beta version of our app, but the number of crashes reported is ~0. We also cannot see any crashes through Xcode Organizer for this release, which is suspiccious.
Script error.
We've decided to implement certain highly-dynamic content in out iOS codebase using web technologies, here's what we're doing:
We download a zip file containing html, javascript, and images.
We unzip the archive, construct a WKWebView, and load the content using webView.loadFileURL(indexHtmlUrl, allowingReadAccessTo: parentDirectory)
This works fine, but we'd also like to be notified on any rendering errors that might be raised, so we can fix them.
let errorHandlerScriptString = """
(function() {
var oldLog = console.log;
console.log = function(message) {
window.webkit.messageHandlers.consoleLog.postMessage(message);
oldLog.apply(console, arguments);
}
})();
// don't even allow asking for location permissions
navigator.geolocation.getCurrentPosition = function(success, error, options) {
error({
PERMISSION_DENIED: 1,
code: 1
});
};
window.onerror = (msg, url, line, column, error) => {
const message = {
message: msg,
url: url,
line: line,
column: column,
error: JSON.stringify(error)
}
if (window.webkit) {
window.webkit.messageHandlers.error.postMessage(message);
} else {
console.log("Error:", message);
}
};
"""
let errorHandlerScript = WKUserScript(source: errorHandlerScriptString, injectionTime: .atDocumentStart, forMainFrameOnly: false)
webView.configuration.userContentController.addUserScript(templateParamsScript)
This causes the error messages to be censored to just "Script error." - See here for more reference https://stackoverflow.com/questions/50229935/wkwebview-get-javascript-errors
This seems to be a security measure to prevent scripts with a different origin from reading error messages. I've tried to move the javascript that hooks to window.onerror to a file that's loaded in the header of the html, as well as putting it directly at the beginning of the <body> tag. Same results, still censored.
There's recommendations to load the html using webView.loadHTMLString(html, baseURL: URL(string: "http://localhost/")!), but my understanding is that than there is not way to access a local resource, such as an image that was downloaded together with the html?