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 --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:

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) {
    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');

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="" />
        <variable name="URL_SCHEME" value="mycoolapp" />

Friday, 10 April 2015

Invoke phone Dialer from Cordova / Phonegap

There's a "tel:" schema available to invoke an external dialer from the app.

The usage example:
<a href="tel:0-800-202020">0-800-202020</a>

It works in the same way for other schemas such as "mailto:", "sms:", "geo:" and "market:".

To enable this functionality the following access permissions should be added into the config.xml:
<access origin="tel:*" launch-external="yes"/>
<access origin="geo:*" launch-external="yes"/>
<access origin="mailto:*" launch-external="yes"/>
<access origin="sms:*" launch-external="yes"/>
<access origin="market:*" launch-external="yes"/>