Détecter un mobile par son UA en PHP 5 (OOP)

Télécharger la version 2

J’ai posté sur mon blog il y a quelques mois un script PHP permettant de rediriger un utilisateur de mobile vers une adresse dédié (et vice versa).

Ce code était un nettoyage rapide d'un script de redirection déjà existant, et je me promettais de le refaire encore une fois (cette fois sous la forme d'une Class PHP 5). Cela le rendrait plus facilement utilisable et franchement plus moderne.

Si vous utilisez encore une vieille version de PHP ne supportant pas la programmation orientée objet (OOP), vous pouvez toujours avoir recours à l'ancien script.

Ce code est encore et toujours offert gratuitement, libre à vous d'en faire ce que vous désirez !

Quelques notes sur la redirection mobile et le "Responsive Design"

Ce script n'est pas parfait ! Une de ses principales faiblesse est la difficulté avec laquelle on peut détecter les tablettes n'étant pas des iPad.

Veuillez alors l'utiliser en toute connaissance de cause. Le design fluide ou "responsive design" est dans presque tous les cas (sauf lors de la recherche d'une solution simplifiée) une bien meilleure approche.

Le "responsive design" se fait habituellement côté client à l'aide des Media Queries CSS 3. Cela dit, ce travail doit se faire autant, sinon plus, en amont d'un réponse HTTP du côté serveur !

Tout ce concept de design fluide est malgré tout compliqué et mériterait bien un article à lui seul. J'essayerai de m'y atteler quand j'aurai le temps, mais ne vous attendez à rien, ce ne sera pas avant quelques mois (le sujet est complexe) - et plusieurs blogs anglais en auront sûrement fait le tour... Si cela vous intéresse, le mot clé à rechercher sera "RESS" (tenant pour "Responsive Design Server Side")

Les mains à la pâte: l'installation de base

L’utilisation du présent script est somme toute assez simple. Il faut tout d’abord intégrer le code (avec un require_once par exemple) en haut de sa page. Si vous êtes familié du PHP, cela ne vous sera pas étranger.

<?php  
    require_once('class.detect_device.php');
?>
<!DOCTYPE html>

Notez qu’il est très important de ne laisser aucun espace blanc entre le haut de la page et cette fonction, auquel cas vous aurez une erreur PHP « header already sent ». Cette erreur empêchera toute redirection.

Ensuite, il vous faudra créer un instance de notre objet. Ainsi:

<?php  
    require_once('class.detect_device.php');

    $actual_device = new detect_device();
?>
<!DOCTYPE html>

À ce niveau, vous avez créé une instance de notre object. Veuillez bien noter que la variable (dans cet exemple $actual_device) peut s'appeller n'importe comment. C'est à votre guise.

Comment allons-nous gérer les différents appareils mobiles ?

Une fois qu'un objet est instancié, il ne fait rien de soit même. C'est donc à nous d'utiliser ses fonctions (que nous verrons dans les prochaines sections) et de spécifier son comportement spécifique à notre propre application Web.

Tout d'abord, nous pouvons redéfinir la manière dont notre object considérera les mobiles et les tablettes. Pour cela, il suffira de changer la valeur de quelques attributs de notre Class.

    require_once('class.detect_device.php');

    $actual_device = new detect_device();

    $actual_device->ipad = false;
    $actual_device->android = "http://adresse-specifique-a-android.mobi";
    $actual_device->iphone = true;

Les différents attributs sont: iphone, ipod, ipad, android, opera, blackberry, palm, windows, others, oldmobile et desktop.

Vous pourrez donner une de ces trois valeurs à un attribut:

  1. False: L'appareil sera géré comme un ordinateur de bureau.
  2. True: L'appareil sera géré comme un mobile
  3. Une URI: L'appareil sera géré comme un mobile, mais sera redirigé vers cette adresse particulière en cas de redirection

Gestion par défaut des appareils mobiles

Voici le comportement par défaut des différents éléments :

iPhone, iPod, Androïd, Opera (appareils mobiles), Blackberry, Palm OS, Windows phone, et les autres (appareils répondant à divers tests comment étant bien des mobiles - mais probablement pas des téléphones intelligents) seront gérés comme des mobiles.

iPad et desktop (ordinateurs traditionnels) seront géré comme des ordinateurs de bureau.

Fonction: Redirection selon le mobile

Une fois que la manière dont votre objet gèrera les différents appareils vous convient, une première fonction peut être appellé. Cette fonction vous permettra de rediriger (ou pas) un appareil vers une adresse dédié.

Tout d'abord, il vous faudra définir deux nouveaux attributs:

$actual_device->mobileredirect = "http://site-dedie-mobile.com";  
$actual_device->desktopredirect = false;

Deux valeurs peuvent être données à ces deux attributs:

  • false: Aucune redirection n'aura lieu
  • URI: Les appareils classé mobile ou desktop seront redirigés vers l'adresse inscrite

Veuillez noter que si une adresse a déjà été liée à un appareil particulier lors de la précédente étape; cette adresse sera utilisé lors de la redirection.

Une fois la valeur de ces attributs définie, il ne reste plus qu'à appeller la fonction:

$actual_device->redirect();  

Réserver des templates ou des sections de DOM spécifique au mobile

Bien que le précédent script ne permettait que de rediriger des mobiles, la nouvelle version vous permet aussi très simplement d'afficher un contenu ou une présentation adapté à un mobile ou non.

Une fonction est utilisé dans le cas présent, et elle se basera sur le comportement des appareils défini plus haut.

Cette fonction s'appelle is_mobile() et retournera une valeur booléenne. True s'il s'agit d'un mobile, et false autrement.

if($actual_device->is_mobile()){  
    require("views/template_mobile.php");
} else {
    require("views/template_base.php")
}

À vous de voir comment une telle fonction peut s'utiliser au sein de votre structure.

Il est également possible que vous vouliez présenter de l'information différente selon un appareil très précis. Par exemple, vous ne souhaiteriez pas présenter le même lien de téléchargement d'application si vous êtes confrontés à un iPhone et à un Android.

La variable "actual_device" vous permettra de filtrer plus précisément l'appareil visitant votre site.

switch($actual_device->actual_device){  
    case "iphone" :
        echo "Telecharger mon application pour iPhone";
        break;
    case "android" :
        echo "Telecharger mon application pour Android";
        break;
    default :
        echo "Malheureusement mon application n'est pas encore disponible pour votre mobile.";
        break;
}

Gérer la visualisation de la version complète de votre site

Un commentaire lors de la précédente version me demandait comment faire en sorte que le mobile ne soit pas redirigé si l'utilisateur de mobile venait à cliquer sur un lien "voir la version complète".

Cette option ne s'ajoutait pas réellement à une fonction PHP simple, mais s'ajoute très facilement à une objet!

Ainsi, vous pouvez désormais appeller ces deux fonctions:

// bloquera toute les redirections jusqu'a nouvel ordre  
$actual_device->prevent_redirection();

// permettra la redirection si elle a ete bloque par le passe
$actual_device->allow_redirection();

Qui génèreront un cookie qui sera récupéré afin de savoir si un utilisateur ne souhaite pas être redirigé vers la version mobile de votre site. Cela vous fera bien moins de programmation à faire vous même, et c'est toujours un plus à avoir sous la main.

En passant, ces fonctions fonctionneront aussi avec la fonction is_mobile()

Conclusion

Voilà, c'est fait ! N'hésitez pas à adapter ce code ou à vous en inspirer. C'est je crois une bonne base pour des projets de petites envergures ou sans les moyens de développer un vrai système de design fluide alliant CSS 3 et de la détection de fonctionnalité côté serveur.

Mais surtout, la détection de UA et la redirection mobile est probablement la seule technique valable dans le cas d'un site déjà existant et coder de manière peu flexible - et nous savons tous que ce genre de site pullule sur le web !

Si jamais vous aviez une question sur le fonctionnement du code, ou si vous rencontrez un bug, n'hésitez pas à laisser un commentaire ou à me contacter !

Télécharger la version 2