Handling PhoneGap iOS Application Using Custom URL Scheme

Introduction:
Custom URL scheme is the mechanism through which third party applications can interact with each other. Suppose we want an interaction between our app and the default email application in the device. Apps that support custom URL schemes can use the schemes to communicate with other applications and also initiate specific tasks. For example, an app can open from default email app in IOS devices using custom URL.

Description:
To communicate with an app using a custom URL, we need to register the custom URL scheme in our appname-info.plist file. Apple by default supports for the http, mailto, tel, and SMS URL schemes. So if our URL scheme matches with the scheme mentioned by Apple then the Apple provided application will launch instead of our application. Therefore we need to be very careful before declaring the scheme.

Here is the example how we can create the customized URL scheme for our application.

1. First we need to register the cutom scheme. So open the appname-info.plist file as property list. In my case it is HelloWorld-info.plist.

HelloWorld-info.plist

HelloWorld-info.plist

Here we can see the + button under Type. So click on that , it will open a list containing lots of  keys. Other wise you can right click on the file and select “Add Row” and it will also open the list of keys.

Add Row

Add Row

2. In the next step choose the URL types as the keys.

URL types

URL types

3. Expand the URL types by clicking on the side arrow. It will open Item 0, click on it to expand and it will open URL identifier. So add the value for  URL identifier, in my case it is com.mindfire.helloworld (com.companyname.appname).

URL identifier

URL identifier

4. In 4th step add another row for Item 0 and it will again list many keys, so choose URL Schemes from the options.

URL Schemes

URL Schemes

5. Add the value for URL Schemes. In my case it is “HelloWorld” which is the name of the application.

HelloWorld

HelloWorld

So when we open the info.plist file in text editor it will look like the bellow image. Here the URL identifier is com.mindfire.mindfire and the URL Schemes is HelloWorld.

Code

Now we can pass the information to our application using the custom URL and get the same when application launched via other application. For example, we are launching the application from email and passing some parameters along with the custom URL. So here is the example of custom URL which will launch our application from email using custom URL scheme.

<a href=”HelloWorld://customurl/username=James Bond”>HelloWorld</a> 

So when we click the link in default email application in IOS devices, it will open our application automatically by detecting the scheme. Here we can observe that the above anchor tag containing href property which starts with “HelloWorld” matches with the same scheme mentioned in info.plist file. Next we need to get the parameter that we have passed along with the custom URL. Lets say we need the username from the URL. So we need to declare a predefined function which will interact with the application when the app is launched via custom URL scheme. Here is the example below.

function handleOpenURL(url) {

                        //Here we can parse the url .

                        var link = url.split(‘=’);

                        var username = link[1];

                        alert(username);

            }

handleOpenURL is the global function which will take url as parameter and we can find the use for this function in AppDelegate.m file. So please do not try to modify the function name. This function will get the url along with the parameter attached with it , if our application is launched via custom URL scheme.

Summary:
So using the above example we can communicate with our application from some other ios application which is handle by the custom URL scheme for PhoneGap iOS applications.

Written By: Sourabha Kumar Sahoo, Software Developer, Mindfire Solutions

Advertisements

3 thoughts on “Handling PhoneGap iOS Application Using Custom URL Scheme

  1. Hi, thanks for the info. In my case (PhoneGap 3), I found “openURL” function in AppDelegate.m instead of “handleOpenURL”. Is this the right function ? If it is so, should I write function openURL in my JavaScript ?

    • Hi Habibi, I have checked the updated AppDelegate.m file in PhoneGap 3.5, they have just modified the method name from “handleOpenURL” to “OpenURL” but if you look inside it, it will do the same as it was doing before. So no need to change the JavaScript function for this, same “handleOpenURL” function will work to handle custom schema.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s