Search code examples
ioscordovawkwebviewcordova-ios

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

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.

Solution

  • 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");
}
}

    1. 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] );

         }

    2. Add below preferences in config.xml

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