Ouvrir une application externe depuis une application Cordova

Pendant le développement d’une de mes applications hybrides avec AngularJS, j’ai eut besoin de créer une page listant les autres applications que j’ai développé disponibles sur le Store.

Jusque là pas grand chose de compliqué, je construis ma vue et j’ajoute à chaque élément l’url de l’application sur le store.

Sauf que l’url ouvre la page web du store dans la webview de mon application directement, et du coup au clic sur installer ça ne marche pas…et je ne peux pas pas retourner sur mon application non plus o_O!

Mais alors comment je fais?

 

Petit rappel :

Comme vous le savez sûrement, une application hybride Cordova s’exécute dans une ‘webview’ contenue dans l’application native générée.

Cette webview est donc un conteneur dans lequel on peut exécuter une page web ou développer une page web (html, css, javascript…).

On peut presque dire que c’est un mini navigateur web embarqué.

Et donc qu’est ce qui se passe dans un navigateur quand on clique sur un lien? Le lien est ouvert dans la même page du navigateur !

Et bien il se passe la même chose dans la webview, le lien s’ouvre dans la webview de l’application.

 

Comment contourner ce problème ?

Heureusement, il existe un plugin pour ça !

Le plugin en question s’appelle “InAppBrowser” et est téléchargeable ici : http://plugins.cordova.io/#/package/org.apache.cordova.inappbrowser

Contrairement à ce que pourrait faire penser son nom, il ne permet pas que d’utiliser le navigateur intégré dans l’application.

 

Installation :

Pour l’installation, rien de bien compliqué, il suffit d’utiliser votre commande habituelle pour installer un plugin Cordova :

 cordova plugin add org.apache.cordova.inappbrowser 

 

Utilisation :

Et donc maintenant pour ouvrir notre application externe il suffit d’utiliser l’appel javascript suivant :

var ref = window.open(url, target, options);

• Le paramètre ‘url’ correspond à l’url de l’application externe que l’on souhaite ouvrir.
• Le paramètre ‘target’ correspond à l’endroit où va s’ouvrir le lien
  • ‘_blank’ ouvre le lien dans l’application utilisée
  • ‘_system’ ouvre le lien par le système (navigateur système ou store par exemple)

Par exemple, je suis dans mon application sous Windows Phone et je veux ouvrir l’application ‘Average‘, l’url qui correspond est donc : “http://www.windowsphone.com/fr-fr/store/app/average/53817352-6852-4fb3-bc28-dac51c30c1d8“.

Les urls à fournir doivent suivre le template suivant :

• Android : https://play.google.com/store/apps/details?id=<bundleId>
• iOS : https://itunes.apple.com/fr/app/<appName>/id<appId>?mt=8
• Windows phone : http://www.windowsphone.com/fr-fr/store/app/<appName>/<appId>

Et voici un exemple du code avec AngularJs permettant d’ouvrir une application externe :

$scope.goToStore = function(url) {
	// inappbrowser cordova plugin is necessary to do external redirection
	window.open(url, '_system');
};

A noter que ce mécanisme permet également d’ouvrir tout lien externe (site web, apps, …)