BrowserSniffing: tecniche a confronto!

[Arjuna]

Sto cercando di sintetizzare una classe efficace per il browser Sniffing o browser detect, che dir si voglia.

Voglio analizzare le strategie usate da due script selezionati dalla rete (di cui ahimè non ricordo le fonti).

Os Detecting

L'oggetto navigator ha una proprietà platform
Questa ritorna il sistema operativo del navigator.

Oltre a platform esiste anche un riferimento all'OS usato nella proprietà userAgent.

Quale delle due soluzioni è più performante?
Per quanto sono riuscito a vedere entrambe le proprietà hanno la stessa compatibilità con diversi browser (ho cercato sulla reference di www.w3schools.com/ ).



Esecuzione

Script per conoscere il nome dell'OS

var p = navigator.platform;
var u = navigator.userAgent;

var tecnicaUsata = u;
//var tecnicaUsata = p;


var OS = searchOS(dataOS, tecnicaUsata) || "OS sconosciuto";

var dataOS = 
[
	{	subString: "Win",	identity: "Windows"},
	{	subString: "Mac",	identity: "Mac"},
	{	subString: "Linux",	identity: "Linux"}
];

function searchOS (data, t) 
{
	for (var i=0; i<data.length; i++)	
		if (t.indexOf(data[i].subString) != -1)
			return data[i].identity;
}

in realtà questa cosa è poco utile (dipende dagli obbiettivi ovviamente).
Più utile è una cosa di questo genere:

var p = navigator.platform;
var u = navigator.userAgent;

var t = u;
//var t = p;

OSWIN 	= (t.toLowerCase().indexOf("win") > -1) ? 1 : 0;
OSMAC 	= (t.toLowerCase().indexOf("mac") > -1) ? 1 : 0;
OSLIN 	= (t.toLowerCase().indexOf("linux") > -1) ? 1 : 0;
OSOT 	= (!OSWIN && !OSMAC && !OSLIN) ? 1 : 0;

in questo modo si può usare velocemente una struttura di controllo:

if (OSWIN) {};
if (OSMAC) {};
[etc...]

Browser Detecting

Qui la situazione si complica a causa della non omogeneità delle intestazioni di userAgent.

Iniziamo con il creare l'array di dati per le tipologie di browser che vogliamo intercettare:

var dataBrowser =
[
	{ 	string: navigator.userAgent,
		subString: "OmniWeb",
		versionSearch: "OmniWeb/",
		identity: "OmniWeb"
	},
	{
		string: navigator.vendor,
		subString: "Apple",
		identity: "Safari"
	},
	{
		prop: window.opera,
		identity: "Opera"
	},
	{
		string: navigator.vendor,
		subString: "iCab",
		identity: "iCab"
	},
	{
		string: navigator.vendor,
		subString: "KDE",
		identity: "Konqueror"
	},
	{
		string: navigator.userAgent,
		subString: "Firefox",
		identity: "Firefox"
	},
	{
		string: navigator.vendor,
		subString: "Camino",
		identity: "Camino"
	},
	{		// for newer Netscapes (6+)
		string: navigator.userAgent,
		subString: "Netscape",
		identity: "Netscape"
	},
	{
		string: navigator.userAgent,
		subString: "MSIE",
		identity: "Explorer",
		versionSearch: "MSIE"
	},
	{
		string: navigator.userAgent,
		subString: "Gecko",
		identity: "Mozilla",
		versionSearch: "rv"
	},
	{ 		// for older Netscapes (4-)
		string: navigator.userAgent,
		subString: "Mozilla",
		identity: "Netscape",
		versionSearch: "Mozilla"
	}
]

la lista è lunga ma credo non sia nemmeno completa.

di seguito la funzione per estrapolare i dati che ci interessano:

var browser 	= this.searchString(this.dataBrowser) || "Browser Sconosciuto";

var versionSearchString;

function searchString(dataBrowser) 
{
	for (var i=0;i<data.length;i++)	
	{
		var dataString 			= data[i].string;
		var dataProp 			= data[i].prop;
		versionSearchString 	= data[i].versionSearch || data[i].identity;
		
		if (dataString)
		{
			if (dataString.indexOf(data[i].subString) != -1)
				return data[i].identity;
		}
		else if (dataProp)
			return data[i].identity;
	}
}

e in fine:

Version Detecting

var version = searchVersion(navigator.userAgent)
			|| searchVersion(navigator.appVersion)
			|| "versione sconosciuta";
							
function searchVersion(dataString)
{
	var index = dataString.indexOf(versionSearchString);
	if (index == -1) return;
	return parseFloat(dataString.substring(index+versionSearchString.length+1));
}

Metodo alternativo

OP 		= ((ind1 = navigator.userAgent.indexOf("Opera")) > -1) ? 1 : 0;
punto 	= (OP) ? navigator.userAgent.indexOf(".",ind1):0;
OP5 	= (OP && parseInt(navigator.userAgent.substr(punto-1)) == 5) ? 1 : 0;
OP6 	= (OP && parseInt(navigator.userAgent.substr(punto-1)) == 6) ? 1 : 0;

IE 		= ((ind2 = navigator.appVersion.indexOf("MSIE")) > -1 && !OP) ? 1 : 0;
IE4 	= (IE && parseInt(navigator.appVersion.substr(ind2+5)) == 4) ? 1 : 0;
IE5 	= (IE && parseInt(navigator.appVersion.substr(ind2+5)) == 5) ? 1 : 0;
IE6 	= (IE && parseInt(navigator.appVersion.substr(ind2+5)) == 6) ? 1 : 0;

NN 		= (navigator.appName.indexOf("Netscape")>-1) ? 1 : 0;
NN4 	= (NN && parseInt(navigator.appVersion)==4) ? 1 : 0;
NN6 	= (NN && parseInt(navigator.appVersion)>4) ? 1 : 0;

OT 		= (!IE && !NN && !OP) ? 1 : 0;

Questo metodo è più sintetico e si rivolge solo a determinati browser (che per finalità di gestione dei comportamenti DOM credo siapiù che sufficiente.


Conclusioni

Queste sono le tecniche migliori che sono riuscito a trovare in rete.
Voi quali usate?

Come costruireste voi una classe per gestire il browser sniffing?

[stiffa]

//sniffing
var exclude=1;
var agt=navigator.userAgent.toLowerCase();
var win=0;var mac=0;var lin=1;
if(agt.indexOf('win')!=-1){win=1;lin=0;}
if(agt.indexOf('mac')!=-1){mac=1;lin=0;}
var lnx=0;if(lin){lnx=1;}
var ice=0;
var ie=0;var ie4=0;var ie5=0;var ie6=0;var com=0;var dcm;
var op5=0;var op6=0;var op7=0;
var ns4=0;var ns6=0;var ns7=0;var mz7=0;var kde=0;var saf=0;
if(typeof navigator.vendor!="undefined" && navigator.vendor=="KDE"){
    var thisKDE=agt;
    var splitKDE=thisKDE.split("konqueror/");
    var aKDE=splitKDE[1].split("; ");
    var KDEn=parseFloat(aKDE[0]);
    if(KDEn>=2.2){
        kde=1;
        ns6=1;
        exclude=0;
        }
    }
else if(agt.indexOf('webtv')!=-1){exclude=1;}
else if(typeof window.opera!="undefined"){
    exclude=0;
    if(/opera[\/ ][5]/.test(agt)){op5=1;}
    if(/opera[\/ ][6]/.test(agt)){op6=1;}
    if(/opera[\/ ][7-9]/.test(agt)){op7=1;}
    }
else if(typeof document.all!="undefined"&&!kde){
    exclude=0;
    ie=1;
    if(typeof document.getElementById!="undefined"){
        ie5=1;
        if(agt.indexOf("msie 6")!=-1){
            ie6=1;
            dcm=document.compatMode;
            if(dcm!="BackCompat"){com=1;}
            }
        }
    else{ie4=1;}
    }
else if(typeof document.getElementById!="undefined"){
    exclude=0;
    if(agt.indexOf("netscape/6")!=-1||agt.indexOf("netscape6")!=-1){ns6=1;}
    else if(agt.indexOf("netscape/7")!=-1||agt.indexOf("netscape7")!=-1){ns6=1;ns7=1;}
    else if(agt.indexOf("gecko")!=-1){ns6=1;mz7=1;}
    if(agt.indexOf("safari")!=-1 || (typeof document.childNodes!="undefined" && typeof document.all=="undefined" && typeof navigator.taintEnabled=="undefined")){mz7=0;ns6=1;saf=1;}
    }
else if((agt.indexOf('mozilla')!=-1)&&(parseInt(navigator.appVersion)>=4)){
    exclude=0;
    ns4=1;
    if(typeof navigator.mimeTypes['*']=="undefined"){
        exclude=1;
        ns4=0;
        }
    }
if(agt.indexOf('escape')!=-1){exclude=1;ns4=0;}
if(typeof navigator.__ice_version!="undefined"){exclude=1;ie4=0;} 

[99caos]

forse non è chiara la natura del mio post

io volevo un confronto non un copia incolla...

avessi almeno commentato il codice... ci dici per quale motivo proponi questo script?

[stiffa]

scusa.....hai chiesto quali usiamo...poi la discussione e' un'altra cosa..

Non e' commentato....pazienza.... lo ho trovato in rete e va benone...Purtroppo non sono in grado di approfondire...a te il compito visto che ne sai molto piu di me.

ciao