Launch Ionic app with a web or email link

Custom URL scheme PhoneGap Plugin is a cool plugin for Cordova that is designed to allow to launch apps by clicking on a link in an email or on a web page. Bellow is an example of how this plugin can be used for the Ionic application.

First, you need to install the plugin. Go to your Ionic project folder and launch:

1
2

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

Replace the testapp with the name of your application. This name will be used as a part of the link. For example, for the testapp, the resulting link will look like the testapp://[somepath]. Here you can find some hints on the url scheme from the plugin author.

After you install the plugin, you need to implement some url handling to be able not just to launch your application, but also to redirect users to a specific page. Bellow is an example of such url handling configuration defined in the app.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.run(['$state', '$window',
    function($state, $window) {
        $window.addEventListener('LaunchUrl', function(event) {
            // gets page name from url
            var page =/.*:[/]{2}([^?]*)[?]?(.*)/.exec(event.detail.url)[1];
            // redirects to page specified in url
            $state.go('tab.'+ page, {});
        });
    }
]);

function handleOpenURL(url) {
    setTimeout( function() {
        var event = new CustomEvent('LaunchUrl', {detail: {'url': url}});
        window.dispatchEvent(event);
    }, 0);
}

The plugin looks up and calls the handleOpenURL(url) method. I use setTimeout function with 0 delay, to be sure that the app is loaded before the event is fired. A listener for the event that is dispatched from handleOpenURL is added to the run block to process the url. This code redirects to the page that is specified in the url, so if user clicks on the testapp://friends link he/she will be redirected to the "friends" page.

When trying this approach out, you can you get the next error: Webpage not available The webpage at testapp://friends could not be loaded because: net::ERR_UNKNOWN_URL_SCHEME`

It means that you installed the plugin before Cordova has generated the platform, so you just need to reinstall the plugin and run your app one more time.

You can have a look at the full example here.