Completing migration of a MobileFirst hybrid app

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

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. You can move this addition anywhere you want to, but you 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.