Ghid JavaScript: detectarea automată a browserului utilizatorului prin navigator.userAgent

În dezvoltarea web, compatibilitatea între browsere a reprezentat dintotdeauna o provocare tehnică majoră. De multe ori, pentru a asigura o randare corectă a paginilor sau pentru a evita erori specifice unor motoare de randare, dezvoltatorii sunt nevoiți să execute blocuri de cod condiționate în funcție de aplicația client folosită. Cum putem detecta în mod automat tipul de browser, versiunea acestuia și sistemul de operare prin intermediul JavaScript?

Soluția clasică: obiectul BrowserDetect

Una dintre cele mai populare metode tradiționale pentru identificarea mediului de rulare se bazează pe inspectarea proprietăților globale navigator.userAgent, navigator.vendor și navigator.platform. Obiectul de mai jos analizează șirurile de caractere trimise de browser și identifică automat clientul:

var BrowserDetect = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "Un browser necunoscut";
        this.version = this.searchVersion(navigator.userAgent)
            || this.searchVersion(navigator.appVersion)
            || "o versiune necunoscută";
        this.OS = this.searchString(this.dataOS) || "un sistem de operare necunoscut";
    },
    searchString: function (data) {
        for (var i = 0; i < data.length; i++) {
            var dataString = data[i].string;
            var dataProp = data[i].prop;
            this.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;
            }
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index === -1) return;
        return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
    },
    dataBrowser: [
        { string: navigator.userAgent, subString: "Chrome", identity: "Chrome" },
        { string: navigator.userAgent, subString: "OmniWeb", versionSearch: "OmniWeb/", identity: "OmniWeb" },
        { string: navigator.vendor, subString: "Apple", identity: "Safari", versionSearch: "Version" },
        { 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" },
        { 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" },
        { string: navigator.userAgent, subString: "Mozilla", identity: "Netscape", versionSearch: "Mozilla" }
    ],
    dataOS: [
        { string: navigator.platform, subString: "Win", identity: "Windows" },
        { string: navigator.platform, subString: "Mac", identity: "Mac" },
        { string: navigator.userAgent, subString: "iPhone", identity: "iPhone/iPod" },
        { string: navigator.platform, subString: "Linux", identity: "Linux" }
    ]
};

BrowserDetect.init();

Cum se utilizează în pagină

După inițializarea scriptului de detecție, afișarea detaliilor sau aplicarea unor stiluri și instrucțiuni condiționate devine foarte simplă. De exemplu, pentru a genera un mesaj informativ direct în document:

document.write("Folosești " + BrowserDetect.browser + " " + BrowserDetect.version + " pe sistemul de operare " + BrowserDetect.OS + "!");

Bune practici: detecția capabilităților vs. User-Agent sniffing

Deși inspectarea șirului User-Agent oferă o soluție rapidă pentru statistici sau cazuri speciale de compatibilitate retroactivă, standardele moderne de dezvoltare recomandă utilizarea feature detection (detectarea capabilităților concrete ale browserului, prin verificarea directă a suportului pentru proprietăți sau API-uri precum window.fetch sau suportul CSS via @supports). Șirurile transmise de browsere pot fi modificate cu ușurință sau pot deveni redundante pe măsură ce motoarele de randare evoluează, dar pentru scripturi clasice sau nevoi rapide de depanare, scriptul de mai sus rămâne o referință utilă.