Nouveautés d'ASP.NET 4 pour la détection et gestion des navigateurs internet

Depuis l'an 2000 le nombre de navigateurs, ainsi que les différentes versions de ceux-ci, n'a cessé de croître. Chacun ayant ses propres spécificités et respectant les normes W3C jusqu'à un certain degré, il n'est pas toujours aisé de rendre un site compatible avec tous les navigateurs. Bien entendu, les choses évoluent il suffit de regarder les résultats du dernier preview d'Internet Explorer 9 ou bien les excellentes capacités de Chrome ou Firefox 4. Néanmoins, il existe encore de nombreux postes de travail équipés d'anciennes versions, comme Internet Explorer 6 pour ne citer que lui. Tout d'abord, nous allons voir dans cet article les bases de la détection de navigateur en ASP.NET, avec un rappel sur l'entête User-Agent. Nous regarderons ensuite les moyens à notre disposition pour gérer les spécificités des différents navigateurs. Enfin, nous nous attarderons sur les nouveautés apparues en ASP.NET 4.0 à ce sujet. Note : le sujet de l'article n'est pas de produire des feuilles de style CSS compatibles avec les différents navigateurs, mais bel et bien de détecter et gérer ces derniers au cas par cas.

Lorsqu'un navigateur adresse une requête à un serveur pour obtenir une page Web, il transmet une chaîne de type texte pour s'identifier. Celle-ci est incluse dans la requête HTTP via l'entête « User-Agent » et elle donne des informations comme par exemple : le nom de l'application, la version, le système d'exploitation, la langue, etc...

L'image ci-dessus représente le User-Agent pour un navigateur Internet Explorer 8 tournant sous Windows 7. Cette représentation est simplifiée, car dans la réalité le User-Agent va contenir des informations complémentaires sur certaines applications ou composants additionnels installés sur le poste. Prenons un exemple, pour mon portable professionnel le User-Agent est le suivant :

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; OfficeLiveConnector.1.4; OfficeLivePatch.1.3; InfoPath.3)

On peut déduire de cette chaîne que mon portable :

• utilise une version 64 bits de Windows 7 grâce à la présence de WoW64 (Windows 32-bit On Windows 64-bit) qui signifie que j'exécute une version 32 bits d'Internet Explorer sur un processeur 64 bits et de NT 6.1 qui indique que c'est un Windows 7. En fait je triche, c'est un Windows Server 2008 R2, mais ce n'est qu'un détail vu qu'il est basé sur la même couche que Windows 7 ;
• utilise le moteur de rendu Trident 4.0 (Trident/4.0) qui est le moteur de rendu le plus standard (et celui par défaut) d'Internet Explorer 8 ;
• dispose des frameworks .NET 2.0 (.NET CLR 2.0.50727), .NET 3.0 (.NET CLR 3.0.30729) et 3.5 (.NET CLR 3.5.30729) et 4.0 (.NET4.0C et .NET4.0E) ;
• dispose du OfficeLiveConnector.1.4 ;
• etc.

Si vous désirez en savoir plus sur les différentes informations, ces liens vous seront utiles :

• pour Internet Explorer 8 : http://blogs.msdn.com/b/ie/archive/2009/01/09/the-internet-explorer-8-user-agent-string-updated-edition.aspx ;
• pour Internet Explorer 9 : http://blogs.msdn.com/b/ie/archive/2010/03/23/introducing-ie9-s-user-agent-string.aspx ;
• pour les différents O.S. Microsoft : http://msdn.microsoft.com/en-us/library/ms537503.aspx ;
• pour tester simplement votre User-Agent : http://www.useragentstring.com ;
• sans parler des nombreux outils plus complets comme Fiddler qui analyse tout le trafic entre votre navigateur et le serveur Web.

Après avoir révisé les bases sur le User-Agent, regardons de plus près quels mécanismes offre ASP.NET pour la détection des browsers.

En ASP.NET et depuis la version 1.0, cette propriété représente un objet HttpBrowserCapabilities qui permet de lister les capacités d'un navigateur. Le code ci-dessous permet d'afficher les différentes informations qu'il contient :

HttpBrowserCapabilities bc = Request.Browser;
Response.Write("<p>Browser Capabilities:</p>");
Response.Write("Type = " + bc.Type + "<br>");
Response.Write("Name = " + bc.Browser + "<br>");
Response.Write("Version = " + bc.Version + "<br>");
Response.Write("Major Version = " + bc.MajorVersion + "<br>");
Response.Write("Minor Version = " + bc.MinorVersion + "<br>");
Response.Write("Platform = " + bc.Platform + "<br>");
Response.Write("Is Beta = " + bc.Beta + "<br>");
Response.Write("Is Crawler = " + bc.Crawler + "<br>");
Response.Write("Is AOL = " + bc.AOL + "<br>");
Response.Write("Is Win16 = " + bc.Win16 + "<br>");
Response.Write("Is Win32 = " + bc.Win32 + "<br>");
Response.Write("Supports Frames = " + bc.Frames + "<br>");
Response.Write("Supports Tables = " + bc.Tables + "<br>");
Response.Write("Supports Cookies = " + bc.Cookies + "<br>");
Response.Write("Supports VB Script = " + bc.VBScript + "<br>");
Response.Write("Supports JavaScript = " + bc.JavaScript + "<br>");
Response.Write("Supports Java Applets = " + bc.JavaApplets + "<br>");
Response.Write("Supports ActiveX Controls = " + bc.ActiveXControls + "<br>");
Response.Write("CDF = " + bc.CDF + "<br>");

Avec ces informations facilement accessibles, il est possible de gérer le rendu des pages d'une application Web en fonction du navigateur et/ou des modules complémentaires installés sur le poste client.

Le code ci-dessous propose une bête solution réutilisable en ASP.NET qui permet de choisir un fichier CSS basé sur le type de navigateur et son numéro de version. Ce code peut-être inclus dans une MasterPage ou un UserControl comme c'est le cas ici :

<%@ Control Language="C#" %>

<%
if (Request.Browser.Browser.ToString() == "IE")
    if (Request.Browser.MajorVersion < 4 )
        Response.Write("<link rel='stylesheet' type='text/css' href='../Styles/NewSite.css'></link>");
    else
        Response.Write("<link rel='stylesheet' type='text/css' href='../Styles/Site.css'></link>");
else if (Request.Browser.MajorVersion < 5)
    Response.Write("<link rel='stylesheet' type='text/css' href='../Styles/NewSite.css'></link>");
else
    Response.Write("<link rel='stylesheet' type='text/css' href='../Styles/Site.css'></link>");
%>

Pour utiliser cet UserControl que nous allons appeler Browser.ascx, on utilise la classique balise Register. Il faut remplacer le lien statique de la feuille de style actuelle au sein de la balise head. Dans l'exemple suivant, le UserControl est utilisé dans une MasterPage :

<%@Register TagPrefix="util" TagName="Browser" Src="~/UserControls/Browser.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title>ASP.NET : Application de test</title>
    <%-- <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> --%>    
    <util:Browser runat="server" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>

L'astuce qui suit est apparue avec ASP.NET 2.0, à savoir changer dynamiquement de MasterPage dans une Page en fonction du navigateur par le biais d'une syntaxe déclarative. Admettons que j'ai dans mon application Web une MasterPage pour Internet Explorer et une autre pour Firefox dont voici l'aperçu :

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Firefox.master.cs" Inherits="MasterPageBrowser.Firefox" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title>ASP.NET : Application de test pour Firefox</title>
    <link href="~/Styles/SiteFirefox.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>

et pour Internet Explorer :

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="IE.master.cs" Inherits="MasterPageBrowser.IE" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title>ASP.NET : Application de test pour Internet Explorer</title>
    <link href="~/Styles/SiteIE.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>

Le code suivant montre comme il est facile de faire cela dans la directive Page :

<%@ Page Title="Home Page" Language="C#" ie:MasterPageFile="~/IE.master" mozilla:MasterPageFile="~/Firefox.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="MasterPageBrowser._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    ...
</asp:Content>

Comme vous pouvez le voir, les directives "ie:" et "mozilla:" permettent de choisir la bonne MasterPage en fonction du Browser. Le tableau ci-dessous résume les différentes possibilités :

Bien entendu, nous aurions pu ne pas utiliser la version déclarative et choisir dynamiquement la MasterPage dans l'event PreInit de la page grâce à l'objet HttpBrowserCapabilities (propriété Request.Browser) comme ci-dessous :

public void Page_PreInit (Object sender, EventArgs e) 
{
    if (Request.Browser.IsBrowser("IE")) 
        this.MasterPageFile = "IE.master";  
    else if (Request.Browser.IsBrowser("Mozilla"))
        this.MasterPageFile = "Firefox.master";
    else  
        this.MasterPageFile = "Site.master";
}

Notez que l'astuce utilisant la syntaxe déclarative ne s'arrête pas aux MasterPages, mais peut également être appliquée aux contrôles :

<asp:button id="btnTest" runat="server"
    ie:text="IE Text"
    mozilla:text="Firefox Text"
    text="Default Text"/>

Comme indiqué précédemment, la propriété Request.Browser correspond à un objet HttpBrowserCapabilities. Cet objet obtient des informations du navigateur ou périphérique client lors d'une demande HTTP, indiquant à notre application le type et le niveau de prise en charge proposés par le navigateur.

Les propriétés exposées par l'objet HttpBrowserCapabilities indiquent des fonctions inhérentes du navigateur, mais ne reflètent pas nécessairement les paramètres actuels de celui-ci. Par exemple, la propriété Cookies indique si un navigateur prend en charge des cookies de manière fondamentale, mais il n'indique pas si le navigateur à l'origine de la requête a sa propriété cookies activée.

L'object HttpBrowserCapabilities est piloté par un ensemble de fichiers de définition de navigateur. Ces fichiers, dont l'extension est .browser, contiennent des informations sur les capacités des navigateurs. Avec l'arrivée d'ASP.NET 4.0, ces fichiers de définition ont été mis à jour et contiennent des informations sur les navigateurs les plus récents. La liste suivante montre de nouveaux fichiers de définition de navigateur :

• blackberry.browser
• chrome.browser
• Default.browser
• firefox.browser
• gateway.browser
• generic.browser
• ie.browser
• iemobile.browser
• iphone.browser
• opera.browser
• safari.browser

6-A. Utilisation des Providers de Browser Capabilities▲

%SystemRoot%\Microsoft.NET\Framework\v2.0.50727\CONFIG\Browsers

aspnet_regbrowsers.exe -I c

6-B. Remplacement des Browser Capabilities▲

public class MonProvider : HttpCapabilitiesProvider 
{ 
  public override HttpBrowserCapabilities GetBrowserCapabilities(HttpRequest request) 
  { 
    HttpBrowserCapabilities browserCaps = new HttpBrowserCapabilities(); 
    Hashtable values = new Hashtable(180, StringComparer.OrdinalIgnoreCase); 
    values[String.Empty] = request.UserAgent; 
    values["browser"] = "MonNavigateur"; 
    browserCaps.Capabilities = values; 
    return browserCaps;
  } 
}

<system.web> 
    <browserCaps provider="ApplicationBidon.MonProvider, ApplicationBidon, Version=1.0.0.0, Culture=neutral" /> 
</system.web>

void Application_Start(object sender, EventArgs e) 
{ 
  HttpCapabilitiesBase.BrowserCapabilitiesProvider = new ApplicationBidon.MonProvider();
   // ... 
}

6-C. Mise en cache des objets HttpBrowserCapabilities▲

public class MonProvider : HttpCapabilitiesProvider 
{ 
    public override HttpBrowserCapabilities GetBrowserCapabilities(HttpRequest request) 
    { 
        string cacheKey = BuildCacheKey(); 
        int cacheTime = GetCacheTime(); 
        HttpBrowserCapabilities browserCaps = HttpContext.Current.Cache[cacheKey] as HttpBrowserCapabilities; 
        
        if (browserCaps == null)
        { 
            HttpBrowserCapabilities browserCaps = new HttpBrowserCapabilities(); 
            Hashtable values = new Hashtable(180, StringComparer.OrdinalIgnoreCase); 
            values[String.Empty] = request.UserAgent; 
            values["browser"] = "MonNavigateur"; 
            browserCaps.Capabilities = values; 
            HttpContext.Current.Cache.Insert(cacheKey, browserCaps, null, DateTime.MaxValue, TimeSpan.FromSeconds(cacheTime));
        } 
        
        return browserCaps; 
    } 
}

Le paragraphe précédent décrit comment créer un nouvel objet HttpBrowserCapabilities en ASP.NET 4.0. Le Provider MonProvider correspond en fait au Browser MonNavigateur. Nous allons voir maintenant comment étendre à la volée les définitions des navigateurs déjà définis en ASP.NET. Je vous vois venir avec une remarque du style "oui, mais il va falloir mettre les mains dans le cambouis et trafiquer les fichiers .browser XML". Et bien rassurez-vous : non. Un exemple sera plus parlant :

public class MonProvider : HttpCapabilitiesEvaluator 
{ 
    public override HttpBrowserCapabilities GetBrowserCapabilities(HttpRequest request) 
    { 
        HttpBrowserCapabilities browserCaps = base.GetHttpBrowserCapabilities(request);
        if (browserCaps.Browser == "Unknown") 
            browserCaps = MonBrowserCapabilitiesEvaluator(request); 

        return browserCaps; 
    } 
}

Dans le code, la fonction GetBrowserCapabilities va tenter d'identifier le browser de la requête. Si toutefois aucun browser n'est identifié, alors nous utilisons notre propre Provider nommé MonBrowserCapabilitiesEvaluator pour identifier le browser de la requête.

7-A. Ajout de fonctionnalités à un Browser Capabilities existant▲

public class MonProvider : HttpCapabilitiesEvaluator
{
    public override HttpBrowserCapabilities GetBrowserCapabilities(HttpRequest request)
    {
        HttpBrowserCapabilities browserCaps = base.GetHttpBrowserCapabilities(request);
        browserCaps.Frames = true;
        browserCaps.Capabilities["MultiTouch"] = "true";
        return browserCaps;
    }
}

Grâce aux nouvelles fonctionnalités apparues en ASP.NET 4.0, nous pouvons maintenant modifier facilement les Browser Capabilities d'un navigateur. Nous pouvons aussi gérer à notre manière et selon nos besoins l'identification d'un navigateur. Mais aussi, pour aller plus loin, ces nouveautés nous permettent de stocker et partager nos définitions des capacités d'un navigateur.

• Documentation MSDN sur ASP.NET 4.0 et Visual Studio 2010
• La partie Learn du site officiel IIS

Je tiens à remercier eusebe19 pour la relecture.