(Deprecated Post) Compatibility issues with MobileFirst Plugin for Cordova and Ionic Webview 2.x

Deprecation note: The issue described in the following post is resolved with cordova-plugin-mfp plugin version 8.0.2019031808 or greater. For more information, see this post.

Ionic Developers - take note! If you now create a new Ionic project and add the MobileFirst Plugin to your Ionic app, you will see that the app launches and after getting past the splash screen displays a blank white screen as seen in the screenshot below. If you’re affected by this, read on to know why this happens and how to resolve the issue.

The Cause

The default WebView that is added to an Ionic project on iOS (as of today) is cordova-plugin-ionic-weview@2.2.0. Versions 2.x of the cordova-plugin-ionic-webview have an issue where they do not render a page with an absolute URI. Ionic apps make use of relative URIs by default and hence are not affected by this issue. However, this issue gets surfaced in apps that have the MobileFirst plugin. This is because MobileFirst makes use of absolute URLs for the pages. This is by design of the MobileFirst SDK to enable certain features such as Direct Update.

Blank Screen on an Ionic App
Blank Screen on an Ionic App
Correct rendering of the UI after replacing the webview
Correct rendering of the UI after replacing the webview

The Solution

The current solution is to simply replace the cordova-plugin-ionic-webview plugin to the compatible version (1.2.1). To do so, navigate to the folder of your Ionic project. Then, remove the existing cordova-plugin-ionic-webview plugin

ionic cordova plugin remove cordova-plugin-ionic-webview

And add the older version of the plugin

ionic cordova plugin add cordova-plugin-ionic-webview@1.2.1

Then, do a cordova prepare

ionic cordova prepare

If you are affected by this issue, feel free to vote on the Git issue here.

Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.
Last modified on May 17, 2019