This guide shows how to embed a Cordova-enabled WebView component within a larger iOS application. For details on how these components can communicate with each other, see Application Plugins.
Support for WebViews for iOS started with Cordova version 1.4, using a
Cleaver component for which the Xcode template serves as a reference
implementation. Cordova 2.0 and later versions only support the
subproject-based Cleaver implementation.
These instructions require at least Cordova 4.x and Xcode 8.0, along
config.xml file from a newly created iOS project. You can use
the procedure in The Command-Line Interface to create a new project,
then obtain the
config.xml file from within the named application's
To follow these instructions, make sure you have the latest Cordova distribution. Download it from cordova.apache.org and unzip its iOS package.
You have two methods for adding Cordova to your project. The first is using Carthage, and the second is to manually add Cordova. Note that Carthage support is only in cordova-ios version 4.4.0 or greater.
After using either of these two methods, continue with the "Using CDVViewController" section.
1. Add Cordova.framework to the Xcode Project using Carthage
In your Cartfile, add (substitute <versionortag> for the appropriate version):
git "git://git.apache.org/cordova-ios.git" "<version_or_tag>" # Apache
Carthage/Build/iOS/Cordova.frameworkinto your Xcode project.
2. Adding Cleaver to the Xcode Project (CordovaLib Sub-Project)
Quit Xcode if it is running.
Open a terminal and navigate to the source directory for Cordova iOS.
config.xmlfile described above into the project directory.
Open Xcode and use the Finder to copy the
config.xmlfile into its Project Navigator window.
Choose Create groups for any added folders and press Finish.
Use the Finder to copy the
CordovaLib/CordovaLib.xcodeprojfile into Xcode's Project Navigator
CordovaLib.xcodeprojwithin the Project Navigator.
Type the Option-Command-1 key combination 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 the Target, then select the Build Settings tab.
-ObjCfor the Other Linker Flags value.
Click on the project icon in the Project Navigator, select the Target, then select the Build Phases tab.
Expand Link Binaries with Libraries.
Select the + button, and add the following frameworks. Optionally within the Project Navigator, move them under the Frameworks group:
AssetsLibrary.framework CoreLocation.framework CoreGraphics.framework MobileCoreServices.framework
Expand Target Dependencies, the top box with that label if there's more than one box.
Select the + button, and add the
Expand Link Binaries with Libraries, the top box with that label if there's more than one box.
Select the + button, and add
Set the 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, including the quotes:
"$(TARGET_BUILD_DIR)/usr/local/lib/include" "$(OBJROOT)/UninstalledProducts/include" "$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include" "$(BUILT_PRODUCTS_DIR)"
As of Cordova 2.1.0,
CordovaLibhas 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, you should use the Xcode migration wizard from the Edit → Refactor → Convert to Objective-C ARC... menu, de-select libCordova.a, then run the wizard to completion.
Add the following header:
Instantiate a new
CDVViewControllerand retain it somewhere, e.g., to a class property:
CDVViewController* viewController = [CDVViewController new];
Optionally, set the
wwwFolderNameproperty, which defaults to
viewController.wwwFolderName = @"myfolder";
Optionally, set the start page in the
<content>tag, either a local file:
<content src="index.html" />
...or a remote site:
<content src="http://apache.org" />
Optionally, set the
useSplashScreenproperty, which 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 the view:
Create a new directory within the project,
Use the Finder to copy the directory into Xcode's Project Navigator window.
Select Create folder references for any added folders.
Set the appropriate
startPageproperties for the directory you initially created, or use the defaults (specified in the previous section) when instantiating 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"