Informazioni sul browser, l'oggetto navigator

Per ottenere informazioni sul browser corrente e su alcune sue impostazioni possiamo utilizzare la proprietà navigator di window. Questa proprietà fornisce informazioni che dovrebbero consentirci di identificare il browser ed il sistema operativo su cui è in esecuzione, ma non sempre le informazioni sono così utili ed accurate. Ad esempio, alcune proprietà dell'oggetto navigator, come appCodeName e product, restituiscono dei valori costanti indipendentemente dal browser: Mozilla nel primo caso e Gecko nel secondo. Il motivo è legato a questioni storiche di compatibilità.

Anche la proprietà appName, che dovrebbe restituire il nome del browser, restituisce valori non sempre attinenti. Ad esempio, Firefox, Chrome e Safari restituiscono la stringa "Netscape", mentre Internet Explorer restituisce la stringa "Microsoft Internet Explorer" e Opera la stringa "Opera".

La proprietà appVersion restituisce una stringa che contiene la versione del browser, ma anche in questo caso non c'è uniformità nella risposta fornita dai vari browser. Ad esempio, Firefox restituisce una stringa analoga alla seguente:

5.0 (Windows)

mentre Chrome restituisce una stringa come questa:

5.0 (Windows NT 6.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36

Quindi anche in questo caso il risultato non è standardizzato.

Identificare il browser: User Agent vs Feature Detection

Utilizzare queste informazioni per identificare il browser corrente richiede una serie di accorgimenti che però non sempre garantiscono il risultato atteso.

Un approccio molto utilizzato per identificare il browser corrente è basato sull'analisi della user agent string, cioè del contenuto dell'intestazione HTTP inviata dal browser al server. Questa stringa è recuperabile tramite la proprietà userAgent dell'oggetto navigator.

Ecco un esempio di codice che individua il browser corrente in base all'analisi della proprietà userAgent:

function getBrowserName() {
  var browserNames = ["Chrome", "Firefox", "MSIE", "Opera", "Safari"];
  for(var i in browserNames) {
  if (window.navigator.userAgent.indexOf(browserNames[i]) > -1) break
  }
  return browserNames[i];
}

L'identificazione del browser corrente spesso viene utilizzata per stabilire se una data funzionalità viene supportata o meno. Considerato il numero crescente di browser, a cui contribuiscono anche le versioni mobile, ed il loro frequente aggiornamento, questa tecnica non è più affidabile.

Feature detection

L'approccio migliore consiste nell'assicurarsi direttamente se una caratteristica è supportata o meno, ad esempio verificando se l'oggetto o il metodo che implementa la funzionalità è diverso da undefined.

L'uso dell'oggetto navigator può comunque risultare utile per stabilire se l'utilizzo dei cookie è abilitato, se il browser è online e qual è la lingua preferita dall'utente. A ciascuna caratteristica corrisponde una proprietà:

console.log(window.navigator.cookieEnabled);
console.log(window.navigator.onLine);
console.log(window.navigator.language);

Mentre le proprietà cookieEnabled e online restituiscono un valore booleano, la proprietà language restituisce il codice della lingua impostata dall'utente come preferita.