June 8, 2017 at 14:48

Cordova integration into native iOS project

  • Tutorial
image

Continuing the short series of articles “ Crosswalk Project - Replacing Android WebView ”, it makes sense to parse a similar task for iOS. This time, the Cordova project was chosen as the basis for integration, because it has more functionality and in this case is better suited to the task.

Both Cordova and Crosswalk are based on WKWebView in their iOS version. Therefore, in this case, they are not a direct replacement for the system WebView, but only expand it.

The target language of the demo project is Swift, but for an Objective-C project everything will be the same. It’s not only the last step to adapt Cordova for use with Swift.

NB! Crosswalk has a simple integration guidewith the help of Cocoa Pods, there is support for the main Cordova plugins with the possibility of extension.

There are 2 options for embedding Cordova in your application:

  1. Embedding Cordova manually.
  2. Adding prerequisites through Cocoa Pods.

NB! Actually there is 1 more simple option. Setting up the environment for Cordova, you will get a working Xcode-project, which can be used separately from Cordova for further development. Just keep in mind that this project is on Objective-C.

Manually embedding Cordova


I will first consider the first option and add Cordova with the necessary components manually. This option is a little more complicated, but more flexible and allows you to use the latest versions of cordova-ios and plugins regardless of the creators of the pods.

Used software versions:


Environment setting


To implement the 1st option, you must first install the Cordova project itself and the necessary utilities. The installation process is quite simple and described in detail in the Cordova documentation , I will focus only on the necessary steps to create a demo project.

1. Install the npm package manager , with the help of which we next install Cordova and the necessary plug-ins (I used MacPorts to install npm):

sudo port install npm4

2. Install directly Cordova :

sudo npm install -g cordova

Similarly, you can install only cordova-ios:

sudo npm install -g cordova-ios

This may come in handy if you do not plan to work with other platforms. However, in this case it will be a little less convenient to use the commands in the console . For example, you would need to use:

cordova-ios/bin/create

with a full path instead of a short command:

cordova create

NB! All packages installed using npm will be located here: / opt / local / lib / node_modules / .

3. Next, create a Cordova project , go to its folder and add the target iOS platform :

cordova create cordova_full
cd cordova_full/
cordova platform add ios

The files we need will be located in the folder cordova_full / platforms / ios /. We get a similar set with minimal differences if we use the cordova-ios package directly.

NB! When creating a project, you can specify the name of the application and bundle identifier. See the Cordova documentation for more details.

4. Additionally, you can install the plugman utility for working with Cordova plugins :

sudo npm install -g plugman

5. We also install 2 plug-ins for displaying messages in the console and working with the system status bar , they will be useful to us for work. To do this, go to the resources folder for ios and run the following commands:

plugman install --platform ios --project . --plugin cordova-plugin-console
plugman install --platform ios --project . --plugin cordova-plugin-statusbar

NB! For those who want to work with the Ionic Framework toolchain (http://ionicframework.com/) and use its templates - everything looks the same.

Project creation


1. The project was based on the standard Tabbed Application template from Xcode. The created demo project with all the resources can be found on github .

The minimum supported version of Cordova iOS 4.4.0 iOS version is 9.0, we select it for the demo project.

2. We transfer the necessary resources to our demo project :

  • project folder CordovaLib cordova_full / platforms / ios / CordovaLib /
  • folder with installed plugins cordova_full / platforms / ios / HelloCordova / Plugins /
  • configuration file Cordova cordova_full / platforms / ios / HelloCordova /config.xml
  • resource folder for cordova_full / platforms / ios / www / web application

NB! After adding CordovaLib , check in the settings of the main project in the tab Build Phases → Compile Sources . Remove the CordovaLib files from there so that there are no conflicts during the build.

NB! When adding a folder with www / resources, you must select the “Create folder references” option so that the resources are located in the standard way for Cordova.

3. You must configure the demo project for the correct assembly :

  • in Build Settings → Other Linker Flags add -ObjC flag
  • in Build Settings → Header Search Paths add paths:

    "$(TARGET_BUILD_DIR)/usr/local/lib/include"
"$(OBJROOT)/UninstalledProducts/include"
"$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include"
"$(BUILT_PRODUCTS_DIR)"

  • in Build Phases → Target Dependencies add CordovaLib
  • in Build Phases → Link Binaries with Libraries add libCordova.a

NB! Note that you must add the entire string along with quotation marks.

In the option for Objective-C, the configuration is complete and the project can be used.

4. Adaptation for Swift . The Cordova iOS project was originally implemented in Objective-C, and at the moment it is not known about official plans for porting it to Swift. There is an unofficial port , but it is not finished.

However, there is no fundamental problem for using Cordova in a Swift project. You only need to add the Bridging Header to connect the Swift world with Objective-C.

To do this, create a .h file in the project (for example, Bridging-Header.h):

#ifndef Bridging_Header_h
#define Bridging_Header_h
#import "CDVViewController.h"
#endif /* Bridging_Header_h */

And add the path to it in Build Settings -> Objective-C Bridging Header:

CordovaEmbedded/Libraries/Bridging-Header.h

5. After that we can use Cordova WebView . For example, we will inherit in the demo project SecondViewController from CDVViewController instead of UIViewController . And with a flick of the wrist, our second tab turns into a full-fledged Cordova application.

6. A few words about Cordova plugins . Initially, we connected 2 plugins to the project:

  • to display messages in the console
  • for working with the system status bar

The first plugin allows us to receive messages in the Xcode console in an adequate form:

CordovaEmbedded[31857:638683] Received Event: deviceready

The second plug-in allows you to configure the status bar - set the style, color, etc.

The plug-ins are configured in the config.xml file . In the project template used, the status bar is initially transparent, with the help of the plug-in settings you can change its appearance and get a transparent status bar for the first tab and opaque for the second. This shows well the performance of the entire integrated system.



Adding prerequisites through Cocoa Pods


1. To illustrate connecting Cordova via CocoaPods, let's take the same Tabbed Application project template from Xcode. The created demo project with all the resources can be found on github .

2. Create a pod file using the command pod initand add pods to it:

pod 'Cordova' # Cordova framework and plugins
pod 'CordovaPlugin-console'
pod 'cordova-plugin-camera'
pod 'cordova-plugin-contacts'
pod 'cordova-plugin-device'
pod 'cordova-plugin-device-orientation'
pod 'cordova-plugin-device-motion'
pod 'cordova-plugin-globalization'
pod 'cordova-plugin-geolocation'
pod 'cordova-plugin-file'
pod 'cordova-plugin-media-capture'
pod 'cordova-plugin-network-information'
pod 'cordova-plugin-splashscreen'
pod 'cordova-plugin-inappbrowser'
pod 'cordova-plugin-file-transfer'
pod 'cordova-plugin-statusbar'
pod 'cordova-plugin-vibration'
pod 'cordova-plugin-wkwebview-engine'
pod 'phonegap-ios-template' # Cordova template

NB! All plugins are added because they are used in the phonegap-ios-template resource template . In practice, you can add only the necessary ones, but then you will need to adjust config.xml in the template.

3. Install the pods with the command pod installand open the resulting .xcworkspace . Next, you must perform step 4 of the previous section , on adapting the project for use with the Swift language.

4. Now there is a problem with the configuration and when building the project does not find all the necessary headers . You can solve this by adding the path (with the recursive flag) in the Build Settings → User Header Search Paths :

"${PODS_ROOT}"

5. - 6. To illustrate the performance of Cordova, you can repeat steps 5 and 6 of the previous section. Everything works the same way.

Conclusions and Useful Resources


The option of manually connecting Cordova is not much more complicated than the option using Cocoa Pods in this case, but it is more flexible and allows you to use the latest versions of cordova-ios and plugins.

But when using Cocoa Pods there are several disadvantages:

  • there is no way to upgrade to the desired version of Cordova iOS or the plugin;
  • anyway, it is necessary to configure the project;
  • you need to change the configuration of Cordova in the pod project.

By and large, the main disadvantages are not very good support for pods for Cordova :) In

addition, you can learn more about integrating Cordova WebView into a native iOS project:


NB! Please note that the official integration documentation is somewhat outdated and may have extra or missing steps.
Tags:

Also popular now: