Spip :: Google Chrome Frame
le | Tags Google, Hack, Spip, Web, php
Dans ce Hack nous allons voir comment intégrer la prise en compte de Google Chrome Frame dans un site Spip.
Pour mémoire Google Chrome Frame est un plugin pour Internet Explorer qui intègre le moteur de rendu de Google Chrome, soit Webkit (à la sauce Google). Ceci permet donc pour un utilisateur qui souhaite garder son IE (on a tous nos problèmes...) de pouvoir bénéficier des dernières avancées du web telles que HTML5, CSS3 et moteur Javascript ultra rapide, ainsi qu’au développeur de pouvoir proposer ces mêmes technologies sans avoir à se soucier de la compatibilité avec IE.
Ce plugin quand il est installé ne prend la main sur le rendu d’une page que si celle-ci le lui demande. Sinon, c’est toujours le moteur d’IE qui fait les rendus.
Pour pouvoir activer Google Chrome Frame il y a principalement 2 méthodes :
Ajouter une balise meta dans le head de votre site.
<meta http-equiv="X-UA-Compatible" content="chrome=1">Ou configurer Apache (ne pas oublier d’activer les modules mod_setenvif et mod_headers).
<IfModule mod_headers.c>
BrowserMatch chromeframe gcf
Header append X-UA-Compatible "chrome=1" env=gcf
</IfModule>
</IfModule>
Ces 2 méthodes ne font que demander le rendu via GCF (Google Chrome Frame) mais si il n’est pas installé, rien ne se passe. Google propose au développeurs de sites d’inclure un script Javascript en charge de détecter la présence de GCF et qui affiche dans une fenêtre modale la page d’installation (voir la doc)
La méthode que je vous propose maintenant est basée sur la deuxième. C’est à dire que c’est via les entêtes HTTP que nous allons passer l’info. Par contre nous ne serons pas dépendant d’Apache puisque nous allons utiliser la fonction header() de PHP et nous allons gagner en souplesse sur la détection du plugin.
Donc ouvrez le fichier mes_options.php qui se trouve dans le répertoire config/ de votre Spip (au besoin créez ce fichier) et ajoutez-y les lignes ci-dessous :
$userAgent = strtolower($_SERVER['HTTP_USER_AGENT']);
// Si c'est Internet Explorer
if (preg_match("#(msie)[/ ]?([0-9.]*)#", $userAgent, $match))
{
// Version antérieure à 9
if($match[2] < 9)
{
// On demande dans les entêtes HTTP que le rendu soit
// fait par Google Chrome Frame s'il est disponible
header('X-UA-Compatible: chrome=1');
// Si on trouve pas de trace de GCF
if(!preg_match("/chromeframe/i",$userAgent))
{
// On initialise une variable que nous pourrons tester
// dans un squelette pour afficher un message d'avertissement
// et suggerer l'installation de GCF
$_GET['chromeframe_msg'] = "oui";
}
}
}
Le but de ce code est de détecter l’agent utilisateur. Si c’est IE on récupère la version. Si la version est inférieure à 9 (on espère ne plus avoir besoin de ce hack avec IE9) on cherche également une trace de GCF. En effet si GCF est installé il modifie l’agent utilisateur en ajoutant "chromeframe" dedans. Si pas de trace de GCF on crée $_GET[’chromeframe_msg’] = "oui" que l’on pourra utiliser dans un squelette.
Voyons justement un exemple d’utilisation que nous pourrions coller dans le squelette sommaire.html :
Si votre visiteur utilise IE sans GCF il verra le message. Sinon, rien et le code ne sera même pas ajouté.
Voici un autre exemple utilisant le plugin mediabox pour Spip :
Ici, un lien s’affichera et son clique fera surgir une fenêtre modale présentant la page d’installation de GCF.
Par ce biais on peut également afficher un article expliquant par le détail pourquoi IE c’est le mal et proposer au visiteur l’installation au choix de GCF, Chrome, Firefox ou Opera...
Répondre à cet article
Suivre les commentaires :
| 