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, we only support the sub-project based Cleaver implementation from now on.

Prerequisites

1. Cordova 2.0.0 or greater
2. Xcode 4.3 or greater
3. Cordova.plist file

Adding Cleaver to your Xcode project (CordovaLib sub-project)

1. Install Cordova
2. Copy the Cordova.plist file into your project folder on disk
3. Drag and drop the Cordova.plist file into the Project Navigator of Xcode
4. Choose the radio-button "Create groups for any added folders"
5. Press the key combination Option-Command-A, which should drop down a sheet to add files to your project (the "Add Files…" sheet). Make sure the "Created groups for any added folders" radio-button is selected
6. Press the key combination Shift-Command-G, which should drop down another sheet for you to go to a folder (the "Go to the folder:" sheet)
7. Enter ~/Documents/CordovaLib/ in the "Go to the folder:" sheet and then press the "Go" button
8. Select the VERSION file in the the "Add Files…" sheet
9. Press the "Add" button in the "Add Files…" sheet
10. Press the key combination Option-Command-A, which should drop down a sheet to add files to your project (the "Add Files…" sheet). Make sure the "Created groups for any added folders" radio-button is selected
11. Press the key combination Shift-Command-G, which should drop down another sheet for you to go to a folder (the "Go to the folder:" sheet)
12. Enter ~/Documents/CordovaLib/CordovaLib.xcodeproj in the "Go to the folder:" sheet and then press the "Go" button
13. Press the "Add" button in the "Add Files…" sheet
14. Select CordovaLib.xcodeproj in the Project Navigator
15. Press the key combination Option-Command-1 to show the File Inspector
16. Choose "Relative to CORDOVALIB" in the File Inspector for the drop-down menu for Location
17. Click on the project icon in the Project Navigator, select your Project, then select the "Build Settings" tab
18. Add -all_load and -Obj-C - for the "Other Linker Flags" value
19. Click on the project icon in the Project Navigator, select your Target, then select the "Build Phases" tab
20. Expand "Link Binaries with Libraries"

21. Click on 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
    

22. Expand "Target Dependencies" - the top box labeled like this if you have multiple boxes!
23. Click on the "+" button, and add the CordovaLib build product
24. Expand "Link Binaries with Libraries" - the top box labeled like this if you have multiple boxes!
25. Click on the "+" button, and add libCordova.a

Using CDVViewController in your code

1. Add this header:

    #import <Cordova/CDVViewController.h>
   

2. Instantiate a new CDVViewController, and retain it somewhere:

    CDVViewController* viewController = [CDVViewController new];
   

3. (OPTIONAL) Set the wwwFolderName property (defaults to "www"):

    viewController.wwwFolderName = @"myfolder";
   

4. (OPTIONAL) Set the startPage property (defaults to "index.html"):

    viewController.startPage = @"mystartpage.html";
   

5. (OPTIONAL) Set the useSplashScreen property (defaults to NO):

    viewController.useSplashScreen = YES;
   

6. Set the view frame (always set this as the last property):

    viewController.view.frame = CGRectMake(0, 0, 320, 480);
   

7. Add Cleaver to your view:

    [myView addSubview:viewController.view];
   

Adding your HTML, CSS and JavaScript assets

1. Create a new folder in your project on disk, for example, name it www
2. Put your HTML, CSS and JavaScript assets into this folder
3. Drag and drop the folder into the Project Navigator of Xcode
4. Choose the radio-button "Create folder references for any added folders"

5. Set the appropriate wwwFolderName and startPage properties for the folder you created in (1) or use the defaults (see previous section) when you instantiate the CDVViewController.

    /*
     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"