Ionic : Lancer un appel ou la cartographie avec les URI Schemes

Cordova Geo/Tel Intent

Dans une application mobile, il n'est pas rare d'avoir recours au Dialer (Composition de numéro) ou aux applications de cartographie (Google Maps, Maps, Waze..).
Il existe quelques plugins qui permettent d'effectuer ces tâches, certes. Mais j'essaie, aussi souvent que possible, de limiter le nombre de bibliothèques et de plugins intégrés à mes applications.


URI Scheme

Il existe plusieurs schémas d'URI que nos périphériques et navigateurs savent interpréter :

  • geo - interaction avec des services géographiques (IETF - RFC 5870 )
  • tel - établir un appel vers un numéro de téléphone
  • maps - Alternative à geo sur Safari Mobile (iOs )

Mais aussi mailto, sms, market (Google Play Store), itms et itms-apps (Apple Store), et plus encore.

Il s'utilise, entre autres, dans les ancrages :

<a href="tel:+330400000000">Appeler le 04 00 00 00 00</a>  

Configuration Cordova

Si vous utilisez le plugin cordova-plugin-whitelist, installé par défaut sur les projets Ionic, il faut d'abord autoriser l'utilisation de ces schémas. Dans le fichier config.xml :

  <access origin="tel:*" launch-external="yes"/>
  <access origin="geo:*" launch-external="yes"/>
  <access origin="maps:*" launch-external="yes"/>

  <allow-intent href="tel:*"/>
  <allow-intent href="geo:*"/>
  <allow-intent href="maps:*"/>

Les 2 syntaxes (access et allow-intent) sont valides, selon les documentations des différentes versions de Cordova. Selon l'OS et la version testés, j'ai constaté que l'une ou l'autre fonctionnait.

Utiliser le Dialer

Pour ouvrir la composition de numéro, la version HTML "standard" suffit, sur Android comme iOs :

<a href="tel:+330400000000">Appeler le 04 00 00 00 00</a>  

Le numéro présenté dans l'URI peut être au format standard (E.164) ou local.

Sur iOs, une demande de confirmation (native) est faite par le système :
iOs, tel URI scheme

Sur tous les systèmes, le téléphone ouvre le Dialer avec le numéro cible déjà saisi.

Lancer la Cartographie

L'utilisation des services géographiques est un peu plus difficile à mettre en œuvre : sur Android, les URI geo fonctionnent dans les ancrages (href="geo:..."), ce qui n'est pas le cas sur iOs (même en utilisant maps à la place de geo).

L'astuce consiste à utiliser le plugin cordova-plugin-inappbrowser (intégré par défaut aux projets Ionic, lui aussi) pour demander l'ouverture d'une nouvelle fenêtre vers une cible précise (notre URI) :

var uri;  
var pointName = 'Maison';  
var coords = lat + ',' + lng;

if (ionic.Platform.isIOS()) {  
    uri = 'maps://?ll=' + coords + '&q=' + pointName;
} else {
    uri = 'geo:0,0?q=' + coords + '(' + pointName + ')';
}

window.open(uri, '_system');  

Les coordonnées sont passées sous la forme d'une chaîne de caractères latitude, longitude. Avec le schéma maps, dans le cas où une localisation précise est passée avec le paramètre ll, un libellé peut être attribué à cette localisation avec le paramètre q.
Avec geo, en se référant à la documentation Android, on peut :

  • Chercher des points d'intérêts à proximité de la position donnée : 0,0 pour la position actuelle, ou préciser la latitude et longitude (geo:0,0?q=restaurants)
  • Demander à localiser un point précis sur la map, en utilisant ses coordonnées et éventuellement un libellé (geo:0,0?q=lat,lng(label))
  • Utiliser ces 2 cas de figures en donnant une adresse postale à la place des coordonnées, avec le même paramètre q. NB: Si Google Maps accepte assez facilement Coordonnées ET Adresse, Waze semble ne donner de résultats qu'avec des Adresses.

Sur Android, le système vous propose de choisir parmi les applications disponibles pour traiter ce schéma :
Android Geo Scheme

Sur iOs, c'est une ouverture direct de Maps ("Plans"), avec un libellé "Retourner à Application" (le nom de notre application) dans la barre de statut, en haut à gauche de votre écran.

iOs Maps Scheme

Pour procéder autrement qu'avec des coordonnées, consultez la documentation des schéma maps: (pour iOs) et geo: (voir la documentation spécifique à chaque plateforme).

Il est possible de demander un itinéraire en passant les adresses de départ et de destination avec les paramètres saddr et daddr, valables avec les schémas maps et geo. maps (iOs seulement, donc), propose aussi de spécifier le mode de transport. Plus d'informations dans la documentation.

J'aborderai certainement à nouveau les URI Scheme dans un prochain article, pour la gestion d'un schéma personnalisé, propre à notre application (notamment avec le plugin Custom-URL-scheme).