Load html file from data directory in cordova-ios from WKWebview

Question

I am working on cordova-ios app. My App will download zip file(contains html files ex:-second_login.html) from server, then we are unzipping it in data directory. After successful unzipping, app should navigate to second_login.html. App is working fine in UIWebview with cordova-ios 5.1.1. But it is not working in cordova-ios-6.1.0 with WKWebview.

Using cordova-ios-6.1.0, I downloaded and unzipped in data-directory successfully to below path.

/var/mobile/Containers/Data/Application/<APPID>/Library/NoCloud/<APP_NAME>//files/www-24862240/second_login.html.

And for loading this second_login.html, I am using document.location = "<PATH_MENTIONED_ABOVE>"

Initially, we got issue in downloading zip file(Cookie sync issue), for this we have used cordova-plugin-ios-xhr plugin. then we successfully downloaded zip file.

Answer 1

After 2 months struggle, we found out the solution for my problem. Native Webkit webview is working fine in swift. so we found out that cordova-ios is making some restriction. So we added some methods in cordovaLib xcode project.

1. Find out WebviewEngine folder in cordovalib xcode project. (cordovaLib.xcodeproj -> private -> plugins -> CDVWebviewEngine)

2. Add new function in CDVWebViewEngine.h file after allowsBackForwardNavigationGestures function

   - (void)loadFileURL:(CDVInvokedUrlCommand*)command;

3)Add below function in CDVWebViewEngine.m file after defaultResourcePolicyForURL function

-(void)loadFileURL:(CDVInvokedUrlCommand*)command;
{

NSString* fileurlStr = [command argumentAtIndex:0];
NSString* folderurlStr = [command argumentAtIndex:1];
NSURL *nsURLfile = [NSURL fileURLWithPath:fileurlStr];
NSURL *nsURLfileroot = [NSURL fileURLWithPath:folderurlStr];

NSFileManager* fileManager = [NSFileManager defaultManager];
NSArray* contentOfDirectory = [fileManager contentsOfDirectoryAtPath:folderurlStr error:nil];
int contentCount = [contentOfDirectory count];

int i;
for(i=0;i<contentCount;i++){
NSString* fileName = [contentOfDirectory objectAtIndex:i];
NSString* path = [folderurlStr stringByAppendingFormat:@"%@%@",@"/",fileName];
NSLog(path);
}

if ([fileManager fileExistsAtPath:[nsURLfile path]]){
[(WKWebView*)_engineWebView loadFileURL:nsURLfile allowingReadAccessToURL:nsURLfileroot];
}else{
NSLog(@"file does not exist");
}
}

4. Then in our application javascript files, use below code to navigate to downloaded bundle files. Here path is zip downloaded and extracted in data directory location with custom folder name(in our case).

   if(isIOS()){

             var path = cordova.file.dataDirectory + APP_NAME_FOLDER + "/" + localStorage.zipExtractLocation +"/";
   
               var wkPath = path.replace("file://", "");
   
            cordova.exec( null, null, 'CDVWebViewEngine', 'loadFileURL', [wkPath+"index.html", wkPath] );
   
            }
   

5. Add below preferences in config.xml

<preference name="deployment-target" value="12" />
<preference name="allowFileAccessFromFileURLs" value="true" />

Answer 2

I followed these steps. The redirect was successful.

But I got "XMLHttpRequest" errors. Then I installed the "https://github.com/globules-io/cordova-plugin-ios-xhr" plugin.

I added the following settings to config.xml;

<preference name="NativeXHRLogging" value="full" />
<preference name="AllowUntrustedCerts" value="true" />
<preference name="InterceptRemoteRequests" value="all" />
<preference name="allowFileAccessFromFileURLs" value="true" />
<preference name="allowUniversalAccessFromFileURLs" value="true" />

Everything is back to normal.

uyummobile/cordova-ios

Answer 3

cordova plugin add @globules-io/cordova-plugin-ios-xhr without the need of adding anything extra fixes the problem. It's a well known issue already for a long time (https://github.com/apache/cordova-ios/issues/883), and hopefully, the changes will be merged to cordova-ios and ultimately fix the issue (https://github.com/apache/cordova-plugin-inappbrowser/pull/778).