Différencier pc, smartphone ou tablette en javascript




 

Si vous souhaitez développer des jeux vidéos html5 à la fois pour smartphone, tablette et pc, il va falloir savoir quel type de machine l’utilisateur utilise. C’est ce que je vous propose d’aborder dans cet article.

Le principe

Un navigateur web stocke toute une séries d’informations qui sont lisibles avec javascript. Ces informations sont accessibles en javascript par le biais de différents objets et notamment window et navigator.

Une information en particulier permet de connaitre le media sur lequel la page web est affichée : le user agent.

Accessible comme ceci :

navigator.userAgent;

Il suffit d’analyser navigator.userAgent pour savoir si la machine est un PC, un smartphone ou une tablette.

Différencier un smartphone d’une autre machine est une chose relativement simple : il suffit de chercher si la chaîne de caractères navigator.userAgent comporte ou pas le mot Mobile.

Lorsque navigator.userAgent comporte le mot Mobile, c’est un smartphone qui est utilisé.
Dans le cas contraire, c’est soit un PC, soit une tablette.

Cela reste insuffisant si on souhaite développer des jeux vidéo puisque vous devez différencier un PC, d’une tablette, d’un smartphone.

Sachez que différencier une tablette d’une autre machine est chose impossible uniquement avec le user agent. Il est nécessaire d’interroger un référentiel des user agent existants et comportant l’information du type de média (pc, tablette, ou smartphone).

N’ayez crainte, vous n’allez pas devoir stocker cela dans votre propre base de données. Il existe des web service permettant d’interroger un référentiel.

L’un d’eux est mis à disposition gratuitement sur ce blog pour tout utilisateur inscrit.

Ce webservice prend en 3 paramètres ua, u et p :
– le user agent;
– un identifiant;
– et un mot de passe.

Il renvoie une structure de données au format jSon comportant 4 indicateurs :
– le premier nommé normal indique s’il est égal à 1 que le user agent est celui d’une machine autre que tablette et smartphone;
– le deuxième nommé mobile indique s’il est égal à 1 que le user agent est celui d’un téléphone mobile;
– le troisième nommé tablet indique s’il est égal à 1 que le user agent est celui d’une tablette;
– le quatrième nommé result est indicateur de réussite de l’appel au webservice.

 

Mise en oeuvre en javascript

Vous allez créer une page web qui exécute un script javascript appelant le webservice avec en paramètre le user agent de l’utilisateur et affichant le type de média utilisé.

Il faut créer une page html comportant :
– une balise div;
– un script javascript faisant une requête ajax.

La requête ajax se fait par le biais d’un objet XMLHttpRequest.

Le div est alimenté lorsque la requête ajax a renvoyé la structure JSON : on vérifie le changement d’état de l’objet XMLHttpRequest, lorsque qu’un code http 200 est reçu, le div est alimenté.

N’oubliez pas de spécifier un user et un mot de passe valide pour le webservice que vous obtiendrez en vous inscrivant sur ce blog.

Le code source :

<html>
 <body>
  <div id="resultUA" style="margin-left:auto;margin-right:auto;width:200px;height:200px;">
  </div>
 </body>
 <script>
 var resultUA = {};
 var xmlhttp = new XMLHttpRequest();
 xmlhttp.open("GET", "http://www.developper-jeux-video.com/download/ws/userAgentCapacityWS.php?ua="+navigator.userAgent+"&u=bla&p=bla", true);
 xmlhttp.onload = function () {
    resultUA = JSON.parse(xmlhttp.responseText);
	var stringDisplay = "PC";
	if (resultUA.mobile == 1) {
		stringDisplay = "SMARTPHONE";
	} else if (resultUA.tablet == 1) {
		stringDisplay = "TABLETTE";
	}
	document.getElementById("resultUA").innerHTML = "Vous utilisez : " + stringDisplay;
 };
 xmlhttp.send(null);
 </script>
</html>

Pour tester cet exemple, vous devez déployer sur un serveur web et appeler cette page depuis votre smartphone, pc ou tablette.

 

Posté dans html5Taggé smartphone user agent rype, tablet user agent type, user agent type, webservice  |  5 commentaires

5 réponses à "Différencier pc, smartphone ou tablette en javascript"

Répondre

*