Custom URL scheme for Cordova

Question

I am trying to find out a good document on "How to define custom URL scheme for a Cordova app(on both iOS and Android platforms)".

I have spent hours on internet but couldn't find a good answer. I got some links which are related but not helping me much.

Mine is a Cordova app which runs on iOS and Android platforms. I need to enable my app to be started upon invoking a URL from email(ex: Myapp://).

Please advise me what configuration changes should I maketo my Cordova app to enable this feature.

EDIT: Android manifest

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" package="com.simple.app" xmlns:android="http://schemas.android.com/apk/res/android">
    <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
    <uses-permission android:name="android.permission.INTERNET" />
    <application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name" android:supportsRtl="true">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.Black.NoTitleBar" android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
            <intent-filter>
                <data android:scheme="com.test.simple" />
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
            </intent-filter>
        </activity>
    </application>
    <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="21" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
</manifest>

Url

<a href="com.test.simple://">Launch The App</a>

Answer 1

UPDATE 2023

As of 2023, PhoneGap is deprecated so using the install script suggested by the accepted answer will fail every time. There is no candidate for the installation of PhoneGap.

If you try to run this in your terminal :

cordova plugin add https://github.com/EddyVerbruggen/LaunchMyApp-PhoneGap-Plugin.git --variable URL_SCHEME=myCustomUrlScheme

This will return this error :

Failed to fetch plugin https://github.com/EddyVerbruggen/LaunchMyApp-PhoneGap-Plugin.git via registry. Probably this is either a connection problem, or plugin spec is incorrect. Check your connection and plugin name/version/URL. CordovaError: Error: No git binary found in $PATH

TLDR

To install the custom-url-scheme plugin run this :

sudo cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=myapp://redirect.html?redirect&return=true

Then on your server you should have a page :

redirect.html

  <a href="myapp://redirect.html?redirect&return=true">Click here to open app</a>

---

Answer 2

I do this :

1. go to your folder project and open your cmd on that
2. next type this below :

cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=mycoolapp

instead of mycoolapp write your app name ,but I just remove (app) on cmd when I paste this but I do not sure it is important or not,so write below in your (index.html) on folder (www) .

<script type="text/javascript" src="js/plugins/LaunchMyApp.js"></script>

and next ,when you add plugin (customurlschema) it added on the plugin folder on your project,so go to the

cordova-plugin-customurlscheme->www->android->LaunchMyApp.js

and copy (LaunchMyApp.js),now as you see that

<script type="text/javascript" src="js/plugins/LaunchMyApp.js"></script>

the (src) is "js/plugins/LaunchMyApp.js" ,so you make this path on your (www) folder and paste (LaunchMyApp.js) on that .now build your app.if at the first time your app isn't build so remove android with

cordova platform rm android

and add it again to your project,and build twice.may it work for you because I test on project,for work with this plugin you should put like tag below on your html page

<a href="mycoolapp://">Open my app</a>

example: I write this below:

cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=mycoolenglish

so my (href) is like below:

<a href="mycoolenglish://index.html">Open my app</a>

and I test it.

.my english isn't very well,so excuse me at first.

Answer 3

I know that you are specifically asking for documentation about how to hand-code this yourself, but just FYI there is a nice plugin that will do all of the (considerable amount of!) work for you:

https://github.com/EddyVerbruggen/Custom-URL-scheme

When you install it, you just provide the URL scheme that you want to use to launch your app:

$ cordova plugin add https://github.com/EddyVerbruggen/LaunchMyApp-PhoneGap-Plugin.git --variable URL_SCHEME=myCustomUrlScheme

And that's pretty much all there is to it. Works on Android and iOS.

Answer 4

Android :

In the manifest :

      <activity
            android:name=".MainActivity"
            android:label="@string/activity_name"
            android:launchMode="singleTask"
            <intent-filter android:label="@string/launcher_name" >
                <action android:name="android.intent.action.MAIN" />
                    <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
            <intent-filter>
                <data android:scheme="yourappscheme"/>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
            </intent-filter>
        </activity>

android:launchMode="singleTask"

Try to use singleTask and singleTop and find the difference. Both have different functionalities.

For iOS :

So, in your app page create a button called "Redirect to my App" with href as "yourappscheme://".

<a href="yourappscheme://">Open my app</a>

Also there are other parts like Scheme, host.

Consider If you wanna get params from the url, you have to go with Native code.

Say your url is something like : yourappscheme://?username="xxx@gmail.com" Android: put this code in OnCreate.

Intent intent = getIntent();
Uri data = intent.getData();
if(data!=null) { //
    //get schma
    String scheme = data.getScheme(); // 
    Toast.makeText(getActivity(), scheme, Toast.LENGTH_LONG).show();
    if(scheme.contains("yourappscheme")) {
        //get parameter
        String urltextboxname = data.getQueryParameter("username");
        system.out.println(urltextboxname) // it will print xxx@gmail.com
    }
}

For iOS : In your App Delegate :

- (BOOL)application:(UIApplication*)application openURL:(NSURL*)url sourceApplication:(NSString*)sourceApplication annotation:(id)annotation
{
    if (!url) {
        return NO;
    }

    // calls into javascript global function 'handleOpenURL'
    NSString* jsString = [NSString stringWithFormat:@"handleOpenURL(\"%@\");", url];
    [self.viewController.webView stringByEvaluatingJavaScriptFromString:jsString];

    // all plugins will get the notification, and their handlers will be called
    [[NSNotificationCenter defaultCenter] postNotification:[NSNotification notificationWithName:CDVPluginHandleOpenURLNotification object:url]];
    NSString *myUrlString = [url absoluteString];
    if ([myUrlString containsString:@"yourappscheme://"])
    {
        NSLog(@"Calling Application Bundle ID: %@", sourceApplication);
        NSLog(@"URL scheme:%@", [url scheme]);
        NSLog(@"URL query: %@", [url query]);
    }
    return YES;
}

Hope this is clear.