Search code examples
ioscordovaxamarin.ioswatchkittelerik-appbuilder

How to Package Watch App within Cordova App


We have a cross-platform cordova app developed using Telerik AppBuilder, and a WatchKit app (extension + watchkit app) built using Xamarin Studio. I don't know what the proper steps are for bundling the compiled Extension (the .appex, right?) and the IPA output by Telerik AppBuilder.

Given the breadth of technologies that we're using, I don't even know where I should start to look for this process. I've noticed that I can access IPA contents like most any other ZIP archive, but don't know if that's even the right first step...


Solution

  • It is posible to achieve this by editing the .ipa file of the main Cordova application. In general one should add the .appex file under Plugins folder, create .entitlements file for the host iPhone/iPad application and finally re-codesign the binary and zip the Payload to an .ipa file again. Below are steps describing how to combine Cordova app developed using Telerik AppBuilder and a WatchKit app (extension + watchkit app).

    1. First off you need to have the .ipa file for your host application and the .appex package for the WatchKit app. An .ipa file is a regular iOS application archive file which can be uncompressed like any other archive. For instance you can use unzip command line tool (e.g. unzip <my_ipa_file>.ipa). Unzip both the Telerik AppBuilder .ipa and the WatchKit app.
      Note: Each .ipa archive contains folder named Payload where the actual .app application package is located. One should keep this naming convension when zipping back this folder.
    2. Delete the _CodeSignature folder at Payload/<cordova_application_name>.app/_CodeSignature. The _CodeSignature folder contains xml file which represents a hash table created during the application binary codesign process. It contains information mainly regarding app resources. We don't need this because our aim is to generate new one.
    3. Copy the .appex WatchKit extension into Payload/cordova_application_name>.app/Plugins (you will most likely have to create the Plugins folder).
    4. Create archived-expanded-entitlements.xcent by using the template

      <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>application-identifier</key> <string>'App_Identifier_Prefix'.'Main_Application_Bundle_Identifier'</string> <key>keychain-access-groups</key> <array> <string>'App_Identifier_Prefix'.'Main_Application_Bundle_Identifier'</string> </array> </dict> </plist>

    Add the archived-expanded-entitlements.xcent under Payload/<cordova_application_name>.app/archived-expanded-entitlements.xcent
    Note: The Main_Application_Bundle_Identifier is the CFBundleIdentifier value of your cordova application. For more about App_Identifier_Prefix check this SO question Changing manually $(AppIdentifierPrefix) property?

    1. All .mobileprovision files should use the correct app IDs and same certificate. I'd recommend that initially the .ipa file of the cordova application be signed with the correct .mobileprovision provision. Otherwise you should place your .mobileprovision under Payload/<cordova_application_name>.app/embedded.mobileprovision.
    2. Use codesign tool to re-sign the binary of the Cordova application.

      codesign -f -s "Certificate_Name" --entitlements Payload/<cordova_application_name>.app/archived-expanded-entitlements.xcent Payload/<cordova_application_name>.app/<cordova_application_name>
    3. Zip the edited Payload back to .ipa file. (e.g. zip -r <expected_ipa_name>.ipa Payload/)
    4. We are good to go!

    Let me know if you need any further assistence on the issue.