Thursday, 16 April 2015

Redirect user directly from a webpage to a cordova / phonegap app

There's a Cordova/Phonegap plugin to define custom schemes:
>cordova plugin add https://github.com/EddyVerbruggen/LaunchMyApp-PhoneGap-Plugin.git --variable URL_SCHEME=mycoolapp

The plugin will automatically update a platform config when the platform added or updated.

With this plugin installed custom scheme URLs like two below will invoke the application:
mycoolapp://
mycoolapp://testscreen

It is also possible to handle these URLs in your hybrid app. The handleOpenURL is called when the application is invoked via the custom scheme
/**
 * Custom schema launch plugin callback
 * @param url
 */
var handleOpenURL = function(url) {
    //your code to process the url
};

The example with AngularJS redirecting user to some particular screen of app:
/**
 * Custom schema launch plugin callback
 * @param url
 */
var handleOpenURL = function(url) {
  setTimeout(function(){
    var hash = url.replace("slingshotapp://","");
    var body = document.getElementById("mySlingshotApp");
    var app = angular.element(body);
    var $injector = app.injector();
    var $scope = app.scope();
    var $location = $injector.get('$location');
    $location.path('/'+hash);
    $scope.$apply();
  },300);
};

Please notice that if you install the plugin with the --save flag it will save the URL_SCHEME variable as `prop`, but it should be saved as a `variable` in order to be properly restored on `plugin add` or `update`. Here's the proper feature definition for config.xml:
    <feature name="Custom URL scheme">
        <param name="id" value="nl.x-services.plugins.launchmyapp" />
        <param name="url" value="https://github.com/EddyVerbruggen/LaunchMyApp-PhoneGap-Plugin.git" />
        <variable name="URL_SCHEME" value="mycoolapp" />
    </feature>