Converting existing MobileFirst hybrid app into a Cordova app

You can migrate an existing MobileFirst Hybrid app to a Cordova app by creating a new Cordova project, and migrating your existing code.

Procedure

Create a Cordova client app by running the mfp cordova create command. Example: mfp cordova create CordovaApp --id "com.ibm.mfp.CordovaApp" -p ios,android. For more information about the mfp cordova create command, see cordova create.
Move the contents of your hybrid apps common directory, to your new Cordova apps /www directory. Example: cp -r MyMFPProject/apps/MyMfpApp/common/* CordovaApp/www/.
Move the application-descriptor.xml file and, if present, the .p12 certificate file from the existing hybrid app to the new Cordova app. Example: cp -r ~/MyMFPProject/apps/MyMfpApp/application-descriptor.xml CordovaApp, then run cp -r ~/MyMFPProject/apps/MyMfpApp/*.p12 CordovaApp/.
Update the www/index.html file.
1. Add the following CSS code to the head of your index.html file, before your CSS code that is already there.
```
<link rel="stylesheet" href="worklight/worklight.css">
<link rel="stylesheet" href="css/main.css">
```
  Note: The worklight.css file sets the body attribute to relative. If this affects the style of your app, then declare a different value for the position in your own CSS code. For example:
```
body {
  position: absolute;
}
```
2. Add Cordova JavaScript to the head of the file after the CSS definitions.
```
<script type="text/javascript" src="cordova.js"></script>
```
3. Remove the following line of code if it is present.
```
<script>window.$ = window.jQuery = WLJQ;</script>
```
  You can download your own version of JQuery, and load it as shown in the following code line.
```
<script src="lib/jquery.min.js"></script>
```
  You do not have to move the optional jQuery addition to the lib folder. You can move this addition anywhere you want to, but you must properly reference it in the index.html file.

Update the www/js/InitOptions.js file to call WL.Client.init automatically.

Remove the following code from InitOptions.js.

The function WL.Client.init get's call automatically with the global variable wlInitOptions.

if (window.addEventListener) {
  window.addEventListener('load', function() { WL.Client.init(wlInitOptions); }, false);
} else if (window.attachEvent) {
  window.attachEvent('onload',  function() { WL.Client.init(wlInitOptions); });
}

Optional: Update the www/InitOptions.js to call WLClient.init manually.

Edit the config.xml file and set the preference mfpManualInit to true.

If you are using the MobileFirst hybrid default template, replace this code.

if (window.addEventListener) {
  window.addEventListener('load', function() { WL.Client.init(wlInitOptions); }, false);
} else if (window.attachEvent) {
  window.attachEvent('onload',  function() { WL.Client.init(wlInitOptions); });
}

With the following code.

if (document.addEventListener) {
  document.addEventListener('mfpready', function() { WL.Client.init(wlInitOptions); }, false);
} else if (window.attachEvent) {
  document.attachEvent('mfpready',  function() { WL.Client.init(wlInitOptions); });
}

Optional: If you have logic specific to a hybrid environment, for example in Your app/iphone/js/main.js, copy the function wlEnvInit() and append it at the end of www/main.js.

// This wlEnvInit method is invoked automatically by MobileFirst runtime after successful initialization.
function wlEnvInit() {
  wlCommonInit();
  if (cordova.platformId === "ios") {
    // Environment initialization code goes here for ios
  } else if (cordova.platformId === "android") {
    // Environment initialization code goes here for android
  }
}

Optional: If your hybrid environment includes the JSONStore feature, add the JSONStore plug-in to your Cordova app.
1. Change directories into your Cordova project. Run cd <CordovaApp>.
2. Run mfp cordova plugin add cordova-plugin-mfp-jsonstore.
  Note: FIPS 140-2 and the IBM® Tealeaf® feature are not available in Cordova apps.