Ionic Webview 2 with CodePush gives white screen on boot.

[Silvest89]

Using the latest version(1.11.16) of CodePush I still get a white screen on boot. It seems it uses the file protocol and immediately gives me an empty index.html. Tested on IOS12 iPhone X Ionic 4

And after using window.location.replace('http://localhost:8080/index.html') (remote debug device in safari.
Everything works until another restart.

Everything works fine if I remove the cordova code push plugin

This is also easily reproducable in a start project.

ionic start codepush-ionic-test blank

cd codepush-ionic-test
ionic cordova plugin add cordova-plugin-code-push
ionic cordova platform add ios
ionic cordova run ios or ionic cordova emulate ios

You will get a white screen on boot. Remove the plugin and everything works.

This happens with both Ionic Web View 2 and cordova-plugin-wkwebview-engine

After further testing everything works fine if I use

https://github.com/atftech-artyom/cordova-plugin-code-push

It seems that you removed

  if ([self hasIonicWebViewEngine]) {
        [self setServerBasePath:url.path];
    } else {
        [self.webViewEngine loadRequest:[NSURLRequest requestWithURL:url]];
    }

In:

- (void)loadURL:(NSURL*)url {
    // In order to make use of the "modern" Cordova platform, while still
    // maintaining back-compat with Cordova iOS 3.9.0, we need to conditionally
    // use the WebViewEngine for performing navigations only if the host app
    // is running 4.0.0+, and fallback to directly using the WebView otherwise.
#ifdef __CORDOVA_4_0_0
    if ([self hasIonicWebViewEngine]) {
        [self setServerBasePath:url.path];
    } else {
        [self.webViewEngine loadRequest:[NSURLRequest requestWithURL:url]];
    }
#else
    [(UIWebView*)self.webView loadRequest:[NSURLRequest requestWithURL:url]];
#endif

How it is currently:

- (void)loadURL:(NSURL*)url {
    // In order to make use of the "modern" Cordova platform, while still
    // maintaining back-compat with Cordova iOS 3.9.0, we need to conditionally
    // use the WebViewEngine for performing navigations only if the host app
    // is running 4.0.0+, and fallback to directly using the WebView otherwise.
#ifdef __CORDOVA_4_0_0
    [self.webViewEngine loadRequest:[NSURLRequest requestWithURL:url]];
#else
    [(UIWebView*)self.webView loadRequest:[NSURLRequest requestWithURL:url]];
#endif
}

#424 #454

[mariusbolik]

I'm facing the same issue! White screen appears after starting the app.
But using it with Ionic --livereload flag doesn't cause any problems.
Very strange.

ionic (Ionic CLI)             : 4.6.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework               : @ionic/angular 4.0.0-rc.0
@angular-devkit/build-angular : 0.10.7
@angular-devkit/schematics    : 7.1.4
@angular/cli                  : 7.1.4
@ionic/angular-toolkit        : 1.2.2

cordova-plugin-code-push     : 1.11.16
cordova-plugin-ionic-webview : 2.3.1
cordova-plugin-file-transfer : 1.7.1
cordova-plugin-file          : 6.0.1
cordova-plugin-zip           : 3.1.0

[mariusbolik]

Any thoughts on this? @alexandergoncharov

[l3ender]

Getting the same issues, my npm dependencies are listed below. Any update on this issue would be greatly appreciated. Thank you.

"dependencies": {
    "@angular/common": "^7.1.3",
    "@angular/core": "^7.1.3",
    "@angular/forms": "^7.1.3",
    "@angular/http": "^7.1.3",
    "@angular/platform-browser": "^7.1.3",
    "@angular/platform-browser-dynamic": "^7.1.3",
    "@angular/router": "^7.1.3",
    "@ionic-native/app-version": "^5.0.0-beta.22",
    "@ionic-native/code-push": "^5.0.0-beta.22",
    "@ionic-native/core": "^5.0.0-beta.22",
    "@ionic-native/keyboard": "^5.0.0-beta.22",
    "@ionic-native/splash-screen": "^5.0.0-beta.22",
    "@ionic-native/status-bar": "^5.0.0-beta.22",
    "@ionic-native/touch-id": "^5.0.0-beta.22",
    "@ionic/angular": "^4.0.0-rc.0",
    "code-push": "^2.0.6",
    "cordova-android": "7.1.4",
    "cordova-ios": "4.5.5",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-appcenter-analytics": "^0.2.2",
    "cordova-plugin-appcenter-crashes": "^0.2.2",
    "cordova-plugin-appcenter-shared": "^0.2.2",
    "cordova-plugin-code-push": "^1.11.16",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-dialogs": "^2.0.1",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.3.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-touch-id": "^3.4.0",
    "cordova-plugin-vip": "file:projects/vip",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-zip": "^3.1.0",
    "core-js": "^2.6.1",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
  }

[l3ender]

@Silvest89 Were you able to fork the main repo and do a workaround to get it working locally? If so could you share details on how you did this?

[Silvest89]

@l3ender

You can use this repo https://github.com/atftech-artyom/cordova-plugin-code-push
I think the vital piece of code got left out with the pull request.

This is what I am using in my apps and it works.

[l3ender]

@Silvest89

Here are a few of the dependencies I'm currently referencing in my package.json:

{
  ...
  "dependencies": {
    ...
    "@ionic-native/code-push": "^5.0.0-beta.22",
    "code-push": "^2.0.6",
    "cordova-plugin-code-push": "^1.11.16",
    ...
  },
  "devDependencies": {
    ...
  },
  "cordova": {
    "plugins": {
      ...
      "cordova-plugin-code-push": {},
      ...
    },
    "platforms": [
      "android",
      "ios"
    ]
  }
}

And then my config.xml:

<plugin name="cordova-plugin-code-push" spec="^1.11.16" />

Did you update both files to point to the above repository? Do you mind sharing your package/config files? Thanks!

[Silvest89]

@l3ender
Yes that's exactly what you have to do.

ionic cordova plugins remove cordova-plugin-code-push
ionic cordova plugins add https://github.com/atftech-artyom/cordova-plugin-code-push

[l3ender]

@Silvest89 Thank you for the help!

@atftech-artyom Thanks for your working repo. Could the fix be PRed and merged back to this repo?

[alexandergoncharov-zz]

Hi all!
Sorry for long delay.

I reproduced this issue only with 4 version of ionic/angular. 3 version works fine.

About logic from https://github.com/atftech-artyom/cordova-plugin-code-push :
I didn't remove this logic from original repo. It just was replaced to https://github.com/Microsoft/cordova-plugin-code-push/blob/master/src/ios/CDVWKWebViewEngine%2BCodePush.m

I'll investigate it, find issue and add supporting ionic/angular 4.
Please let me know if you have any questions or have additional info.

Thanks,
Alexander

[Silvest89]

Hi all!
Sorry for long delay.

I reproduced this issue only with 4 version of ionic/angular. 3 version works fine.

About logic from https://github.com/atftech-artyom/cordova-plugin-code-push :
I didn't remove this logic from original repo. It just was replaced to https://github.com/Microsoft/cordova-plugin-code-push/blob/master/src/ios/CDVWKWebViewEngine%2BCodePush.m

I'll investigate it, find issue and add supporting ionic/angular 4.
Please let me know if you have any questions or have additional info.

Thanks,
Alexander

Thanks for your reply, yes I saw that code, but it only happens with a codepush url

 if ([request.URL.absoluteString containsString:@"codepush"]) {
            if ([CodePush hasIonicWebViewEngine: self]) {
                [CodePush setServerBasePath:request.URL.path webView: self];

The initial cold install, doesn't have a CodePush URL yet. So it just skips the if statement

This gets called for Ionic instead.
return [(WKWebView*)self.engineWebView loadRequest: request];

So you should put a check if it's an Ionic WebView Engine down below in the else as well ;]

You could put a check here or just put it in top function which executes this one.

[alexandergoncharov-zz]

Hi @Silvest89,
Thanks for note this!

But I changed code like you said(just for testing put [CodePush setServerBasePath:request.URL.path webView: self]; here: https://github.com/Microsoft/cordova-plugin-code-push/blob/master/src/ios/CDVWKWebViewEngine%2BCodePush.m#L33) and tried to use atftech-artyom/cordova-plugin-code-push in my app but attempts were unsuccessful and I still have white screen. Possible there is some other issue. My investigation in progress.

Could you please clarify does atftech-artyom/cordova-plugin-code-push working for you?

[l3ender]

@alexandergoncharov I'm using the master branch of atftech-artyom/cordova-plugin-code-push and it is working for me with above dependencies. Thank you for investigating.

[Silvest89]

@alexandergoncharov Yes, I have apps in production running with that repo ;)
I'll fork master and see why it isn't working if you do those checks in your method.

My first thought that it probably has something to do with that the first initial url for ionic is not a file URL. So it will get eaten by last return;

        return [(WKWebView*)self.engineWebView loadFileURL:request.URL allowingReadAccessToURL:readAccessURL];
    } else {
        **here => return [(WKWebView*)self.engineWebView loadRequest: request];**
    }

Will investigate this when I get home. Another thing to note is that with Ionic Webview 3 (released recently) they got rid of the local webserver for iOS. I will investigate this as well :)

[Silvest89]

@alexandergoncharov
https://github.com/Silvest89/cordova-plugin-code-push/commit/4bcd3d352e180cdd9e09403efde3b189b40b08e1
Works fine for both Ionic Webview 2 and 3 =]

All ionic paths should be set with SetServerBasePath

[alexandergoncharov-zz]

@Silvest89 , yeah, Thanks!
Could you please also provide your output for ionic info command?

[Silvest89]

There you go @alexandergoncharov

[alexandergoncharov-zz]

@Silvest89, Thanks for info.
I'm sorry, It is strange but unfortunately I can fix white screen with your workaround. There is the same white screen. I setup start ionic4 project with default way and added your repo as plugin. I also manually changed code to call SetServerBasePath but it also didn't bring success.
Could you please provide dummy project with working workaround if it is possible?

Thanks,
Alexander

[Silvest89]

@alexandergoncharov
https://github.com/Silvest89/code-push-sample
Works fine for me. Just make sure to remove/add platforms again and then use either ionic cordova emulate/run and test it on the device

[alexandergoncharov-zz]

Hi @Silvest89 ,

Thanks for providing demo project! Yeah, you are absolutely right with this fix.

I opened PR for this fix: #491

[alexandergoncharov-zz]

Hi all,

PR #491 was merged and already in new release.
So, I'm going to close this issue for now. Please feel free to reopen it if you face this issue again.

Thanks,
Alexander