20 Juil 2014

[URL Scheme] Démarrer une application mobile depuis un site Web

Il arrive très souvent de naviguer sur le net avec son smartphone et d’aller sur des sites qui ont leur application mobile. La plupart du temps vous verrez apparaitre en haut du navigateur un lien vous permettant d’accéder au Store de votre système (IOS, Android, Windows Phone, …) pour y télécharger l’application (Même si vous la possédez déjà). Dans le cadre de la sortie de l’application mon AXA, nous avons réalisé une page web permettant de détecter si l’application était déjà installé sur votre mobile et si c’est le cas, nous démarrons l’application plutôt que de continuer sur le site mobile. La raison est qu’une application mobile native est toujours plus performante qu’un site mobile et permet également à l’utilisateur de consommer moins de datas en évitant les téléchargements de style et d’images.

Alors comment mettre en œuvre cette pratique ? Et bien il suffit de passer par les URL Scheme. Pour ceux qui ne savent pas ce que c’est, il s’agit en fait d’une déclaration de « scheme » à mettre en configuration de votre application mobile. Ici nous n’allons pas traiter le sujet de “comment cela se configure” mais pour vous donner un exemple cette déclaration permettra à votre smartphone de connaitre des url du type : monSchemeCustom://monapplicationtropgenial (Et oui vous l’aurez deviné, http est un scheme)

Si vous souhaitez approfondir le sujet vous pouvez consulter la documentation Android ou celle d’Apple ou encore celle de Microsoft

Maintenant que vous avez déclaré votre Scheme dans votre application il ne reste plus qu’à créer une petite page Web contenant le script de détection afin de démarrer l’application ou non. Pour faire simple il faut tout d’abord détecter depuis quel type de mobile l’utilisateur navigue, pour ça il existe moult script, moi ici j’ai choisi d’utiliser celui-ci :

var isIpad = navigator.userAgent.match(/iPad/i) != null,

isIphone = !isIpad && ((navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null)),

isIos = isIpad || isIphone,

isAndroid = !isIos && navigator.userAgent.match(/android/i) != null;

Je ne cherche à distinguer que les utilisateurs Ios ou Android, étant donné que l’application Windows Phone n’existe pas tous les autres utilisateurs (Windows Phone, Desktop) seront redirigés directement vers l’espace client.

Maintenant que je connais le type de device, si je suis sur IOS je set une window.location vers mon Scheme custom:

window.location = "COM.MONAXA://profile";

Puis je lance un timeout et en fonction du résultat, si j’ai une erreur 404, cela signifie que je n’ai pas l’application donc je redirige vers l’Apple Store sinon l’application démarre.

 

Si je suis sous Android, je n’ai pas besoin de vérifier que l’application démarre, je set jute une window.location Intent. L’URL scheme Intent prend plusieurs paramètre comme la view de démarrage de l’application, le scheme custom et aussi le nom du package. Ainsi, si l’application est installé, elle démarre sur la view spécifié, sinon Android détecte que l’application n’existe pas et ouvre directement le playstore avec le nom du package que vous avez spécifié dans l’url.

window.location = 'intent://profile#Intent;package=fr.axa.monaxa;scheme=COM.MONAXA;end;';

Pour le reste je redirige directement sur l’espace client

window.location = 'https://client.axa.fr';

Pour exécuter ce script j’ai choisi de le mettre dans une fonction au Load du body.

Voici le script complet :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mon Axa Redirect</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript">
var isIpad = navigator.userAgent.match(/iPad/i) != null,
isIphone = !isIpad && ((navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null)),
isIos = isIpad || isIphone,
isAndroid = !isIos && navigator.userAgent.match(/android/i) != null;

function open() {
if (isIos) {
window.location = "COM.MONAXA://profile";
setTimeout(function() {
if (!document.webkitHidden) {
window.location = 'https://itunes.apple.com/fr/app/id862440857';
}
}, 25);

} else if (IS_ANDROID) {
window.location = 'intent://profile#Intent;package=fr.axa.monaxa;scheme=COM.MONAXA;end;';
} else {
window.location = 'https://client.axa.fr';
}
}
</script>
</head>
<body onload="open()">
</body>
</html>

Maintenant il ne vous reste plus qu’à communiquer l’adresse de cette page via un lien par mail, ou dans un QR Code ou encore par NFC c’est à vous de voir 🙂

Share

Comments are closed.