Embedding Cordova WebView on iOS
Beginning with Cordova 1.4, you can use Cordova as a component in your iOS applications. This component is code-named "Cleaver".
New Cordova-based applications created using the Xcode template provided in Cordova 1.4 or greater use Cleaver, and this template is considered the reference implementation for Cleaver.
Beginning with Cordova 2.0.0 and greater, we only support the sub-project based Cleaver implementation from now on.
- Cordova 2.3.0 or greater
- Xcode 4.5 or greater
config.xmlfile (from a newly created Cordova project)
Adding Cleaver to your Xcode project (CordovaLib sub-project)
- Download and extract the Cordova source to a permanent folder location on your hard drive (say to ~/Documents/Cordova)
- Quit Xcode if it is running.
- Navigate to the directory where you put the downloaded source above, using Terminal.app.
- Copy the
config.xmlfile into your project folder on disk (see Prerequisites above)
- Drag and drop the
config.xmlfile into the Project Navigator of Xcode
- Choose the radio-button "Create groups for any added folders", select the Finish button
- Drag and drop the
CordovaLib.xcodeprojfile into the Project Navigator of Xcode (from the permanent folder location above, and it should be in the CordovaLib sub-folder)
CordovaLib.xcodeprojin the Project Navigator
- Press the key combination Option-Command-1 to show the File Inspector
- Choose "Relative to Group" in the File Inspector for the drop-down menu for Location
- Select the project icon in the Project Navigator, select your Target, then select the "Build Settings" tab
-Obj-C- for the "Other Linker Flags" value
- Click on the project icon in the Project Navigator, select your Target, then select the "Build Phases" tab
- Expand "Link Binaries with Libraries"
Select the "+" button, and add these frameworks (and optionally in the Project Navigator, move them under the Frameworks group):
AddressBook.framework AddressBookUI.framework AudioToolbox.framework AVFoundation.framework CoreLocation.framework MediaPlayer.framework QuartzCore.framework SystemConfiguration.framework MobileCoreServices.framework CoreMedia.framework
Expand "Target Dependencies" - the top box labeled like this if you have multiple boxes!
Select the "+" button, and add the
Expand "Link Binaries with Libraries" - the top box labeled like this if you have multiple boxes!
Select the "+" button, and add
Set the Xcode preference "Xcode Preferences -> Locations -> Derived Data -> Advanced…" to "Unique"
Select the project icon in the Project Navigator, select your Target, then select the "Build Settings" tab
Search for "Header Search Paths". For that setting, add these three values below (with quotes):
"$(TARGET_BUILD_DIR)/usr/local/lib/include" "$(OBJROOT)/UninstalledProducts/include" "$(BUILT_PRODUCTS_DIR)"
With Cordova 2.1.0, CordovaLib has been upgraded to use Automatic Reference Counting (ARC). You don't need to upgrade to ARC to use CordovaLib, but if you want to upgrade your project to use ARC, please use the Xcode migration wizard from the menu: Edit -> Refactor -> Convert to Objective-C ARC…, de-select libCordova.a, then run the wizard to completion.
Using CDVViewController in your code
Add this header:
Instantiate a new
CDVViewController, and retain it somewhere (e.g. to a property in your class):
CDVViewController* viewController = [CDVViewController new];
(OPTIONAL) Set the
wwwFolderNameproperty (defaults to
viewController.wwwFolderName = @"myfolder";
(OPTIONAL) Set the start page in your config.xml, the
<content src="index.html" />
<content src="http://apache.org" />
(OPTIONAL) Set the
useSplashScreenproperty (defaults to
viewController.useSplashScreen = YES;
Set the view frame (always set this as the last property):
viewController.view.frame = CGRectMake(0, 0, 320, 480);
Add Cleaver to your view:
- Create a new folder in your project on disk, for example, name it
- Drag and drop the folder into the Project Navigator of Xcode
- Choose the radio-button "Create folder references for any added folders"
Set the appropriate
startPageproperties for the folder you created in (1) or use the defaults (see previous section) when you instantiate the
/* if you created a folder called 'myfolder' and you want the file 'mypage.html' in it to be the startPage */ viewController.wwwFolderName = @"myfolder"; viewController.startPage = @"mypage.html"