For up-to-date product documentation, see the IBM MobileFirst Foundation Developer Center.

Completing migration of a MobileFirst hybrid app

After we use the migration assistance tool, we must modify some portions of your code manually to complete the migration process.

Before you begin

• You must have already run the mfpmigrate migration assistance tool on your existing hybrid app. For more information, see Starting the Cordova app migration with the migration assistance tool.
• You must have the Cordova Command-Line Interface (CLI) installed, and any prerequisites installed required for using the Cordova CLI for our target platforms if you need to install any additional Cordova plug-ins. (See step 6.) For more information, see The Command-Line Interface at the Apache Cordova web site.
• You must have internet access if you need to download a new version of JQuery (step 1c) or if you need to install any additional Cordova plug-ins (step 6).
• You must have node.js version 4.0.0 or later installed if you need to install additional Cordova plug-ins (step 6).

Complete the steps in this task to finish migrating your MobileFirst hybrid application from IBM MobileFirst Platform Foundation 7.1 to a Cordova application that includes support for IBM MobileFirst Platform Foundation 8.0.

After you complete the migration, your app can use Cordova platforms and plug-ins that you obtain independently of IBM MobileFirst Platform Foundation, and we can continue to develop the app with your preferred Cordova development tools.

Procedure

1. 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. We can move this addition anywhere we want to, but we must correctly reference it in the index.html file.

2. Update the www/js/InitOptions.js file to call WL.Client.init automatically.
   1. Remove the following code from InitOptions.js.

      The function WL.Client.init is called 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); });
      }

3. Optional: Update the www/InitOptions.js to call WLClient.init manually.
   1. Edit the config.xml file and set the <mfp:clientCustomInit> element's enabled attribute to true.
   2. 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); });
      }

4. 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
     }
   }

5. Optional: If your original application uses the FIPS feature, change the JQuery event listener to a JavaScript event listener that listens to the WL/FIPS/READY event. For more information about FIPS, see FIPS 140-2 support.
6. Optional: If your original application uses any third-party Cordova plug-ins that are not replaced or supplied by the migration assistance tool, manually add the plug-ins to the Cordova app with the cordova plugin add command. For information about which plug-ins are replaced by the tool, see Starting the Cordova app migration with the migration assistance tool.

Results

You now have a Cordova app that we can continue to develop with your preferred Cordova tools, but that also includes MobileFirst functionality.

What to do next

Register your app to a MobileFirst Server. For more information, see Register Cordova applications from the MobileFirst Platform CLI.

Parent topic: Migrating existing hybrid or cross-platform apps to Cordova apps supported by MobileFirst version 8.0