Installing the CocoonJS Launcher on IOS

Update: CocoonJS Launcher is available on the App Store. Download now!

While we’re still working to get Apple to approve the CocoonJS Launcher for the AppStore, we have decided to make it available as an xcarchive (Xcode Archive format) so it can be installed easily on any IOS device just by following some easy steps.

So what do you have to do to get an installable IPA archive and run the CocoonJS Launcher on your iOS device.

System configuration needs

As you’re going to create an IPA file from a given xcarchive file, there are some configuration needs to be fulfilled before starting the process:

1. You need a mac computer. We’re talking about modifying an xcode related project, setting up some plist (even though is a plain XML file) properties, using developer provisioning profiles, etc. These steps require a mac computer.
2. XCode installed. The Property List viewer, the organizer, etc are tools needed to create an IPA from an xcarchive file. If you don’t have it installed already, the easiest/recommended way is to download it from the MacOSX AppStore.
3. An Apple developer account. You need your own developer account with apple so you can get the certificates needed to modify the xcarchive and transform it into an IPA file.

Get the xcarchive

First of all you have to download the CocoonJS Launcher App for iOS:

CocoonJS Launcher for iOS

Download and decompress it. You should get a file named “CocoonJSLauncer_DD_MM_YYHH.MM_ios.xcarchive”.

Modify the Bundle Id inside the xcarchive

Next we have to modify the Bundle Id inside the xcarchive as the Bundle Id has to be unique for each CocoonJS Launcher IPA generated by an Apple developer.
To modify the xcarchive Bundle Id:

• Right click on the xcarchive and select Show package contents.

• A new Finder window will appear showing the xcarchive contents. Double-click on the Info.plist file.

• Modify the CFBundleIdentifier property and change the com.ideateca.jscocoon Bundle  Id with your own Bundle Id. The recommended practice is to use a reverse-domain name style string using your company’s name (ie. com.mycompany.apps.cocoonjslauncher) so it does not collide with any other Bundle Id already existing in the AppStore. Save and close the file.

• Back in the xcarchive package contents Finder window, open the Products/Applications folder. Open the CocoonJSLauncher_ios package right-clicking on it and select “Show Package Contents”. That will show all the files inside the package in a Finder window. Edit the Info.plist file and replace the Bundle Identifier property with your Bundle Id (the same one as in the previous Info.plist) and save the document.

Add your Device Id to the registered devices in your Provisioning Portal (if you haven’t already done it)

Open to the IOS Provisioning portal at https://developer.apple.com. Go to the Devices section and click on Add Devices. You will see the following form:

Fill the form with your device information and submit it. In case you’re not sure of which Device ID corresponds to your device, open the iTunes program, select the device and go to the Summary tab. Click on the Serial Number field and the UDID (Unique Device IDentifier) will appear. Copy that UDID to the Device ID field in the form.

Create a new AppId

Go to the App IDs section in the provisioning portal and add a New App ID.

• Description: You can put any name you want to identify the app in the Provisioning Portal, ie. CocoonJS Launcher.
• Bundle Seed ID: Choose any of the generated codes in the drop-down menu.
• Bundle Identifier (App ID Suffix): You should put the same Bundle Id that you put in the Info.plist files in the previous step.

Create an AdHoc distribution provisioning profile

Go to the Provisioning section in the provisioning portal. In the Distribution tab click on New Profile. A form should appear to create iOS distribution provisioning profile.

You should choose Ad Hoc as the Distribution Method.

• Profile Name: Put any name to identify the Provisioning Profile.
• App ID: Select the App ID you have just created.
• Devices: Select all the devices where you want the IPA to be installable.

Once you’re done, submit the form and you will be right back to the Distribution tab of the Provisioning section. The Provisioning Profile we’ve just created should appear in the list as Active and an enabled Download button should appear on the right. If the Download button is disabled just reload the page and it should appear as enabled. Click on it to download the Ad-Hoc provisioning profile. Once it has been downloaded, double-click on it to install.

Create an IPA from the xcarchive

To create an IPA just double click on the xcarchive file. An Organizer window should appear showing the Xcarchive properties as shown below.

Please, check that in the Identifier field your Bundle Id appears.

Select the CocoonJSLauncher_ios Xcarchive and click on Distribute. To generate the IPA you have to select Save for Enterprise or Ad-Hoc deployment and click on Next. In the drop-down menu, choose the corresponding code signing identity for your Bundle Id. The code signing identity must be a Development code signing identity for iOS Development.

Click on Next. Then, just save the IPA in your preferred location.

Install the IPA in the device

To install the IPA on your device first open the iTunes application and drag and drop the IPA to your iTunes library. Once it is copied connect your device and go to the applications tab.

The CocoonJS Launcher App should appear as available for synchronization. Enable the Sync Apps option in case you have it disabled and click on Apply. That should make the app to be synchronized. Now just go to the device and click on it to launch the app.

And that’s all!.

FAQ

1. I tried to install my IPA in another device but an strage error appears.

That can be because of several reasons:

• Your device has a non supported iOS version. The launcher requires iOS 4.3 or above to run.
• The device has not been added to the authorized devices in the Ad-Hoc provisioning profile. To solve this you will have edit the Ad-Hoc distribution provisioning profile in the Provisioning Portal, download it again and generate another IPA following the steps above again.
• You haven’t chosen a development code signing identity when signing de IPA.
1. How can I use the new feature of the iOS CocoonJS Launcher App to try my games?

The iOS version of the CocoonJS Launcher App includes a new feature that is not available in the Android version. Using iTunes you can upload as many .zip files as you want to the launcher so you can have them with you at all times. To learn how to use this feature, please read our blog post