Detect Chrome and Safari in Javascript

Question

I would like display the message "You are not using Chrome, CLICK HERE for download Chrome. But I don't want display message if the browser used is Safari. In practice I want especially convince people who use IE (too crappy) and FF (too heavy) or any others browser (except Safari because is not bad and because any other third party browser who could be installed on Apple OS will have bad performance) to use instead Chrome (ideal choice for my app for a best user experience).

I found a script who seem to be well adapted for make a reliable detection, but I don't know how to customize the code:

var BrowserDetect = {
init: function () {
    this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
    this.version = this.searchVersion(navigator.userAgent)
        || this.searchVersion(navigator.appVersion)
        || "an unknown version";
    this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
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.vendor,
        subString: "Apple",
        identity: "Safari",
        versionSearch: "Version"
    }
]

};
BrowserDetect.init();

Can somebody help? If needed I found the script here:

http://www.quirksmode.org/js/detect.html

Why don't you just write your web app properly and not force users to use a specific browser? — Blender, Sep 23 '13 at 23:09
Why don't you try something similar like here: http://stackoverflow.com/a/12625944/487940. You can then do minor modifications to display your message. Also, bad idea to force users to a browser. If you have to, you should display a little more friendly message: "For best experience, please download and use Google Chrome". IE has significantly improved, so don't underestimate it. — harsimranb, Sep 23 '13 at 23:10
@Eric - Detect browsers, punch the user in the face if they're using IE, *then* detect features. — Bucket, Sep 23 '13 at 23:22
I don't want force to use Chrome, I just want suggest. My app work with ALL browsers but my live test show better best result with Chrome. I hope nobody will contradict me if I say "IE is crappy" even if the latest version seems to be less worst. People are free to choose and I don't care about their choice. The main problem is many people "don't choose" because they just use what is installed by default (IE in most case). My goal is to give an advice as any "chef" can advise you a wine to accompany your meat. — dotcom22, Sep 23 '13 at 23:29
No JavaScript code will work with 100% reliability to do what you want. If your app/website/service is so good that people _absolutely can't do without it_ (unlikely, since you can't even make it look good on more than one browser), they will spoof user agent or something else to use it. If it's not "must-use" good, then you're going to have a hard time convincing people to switch away from their favorite browser anyway. Either way, it seems futile. — Jay, Sep 23 '13 at 23:53

score 2 · Answer 1 · answered Sep 24 '13 at 00:18

Answering the question... :) If you really want to use it, then just use BrowserDetect.browser as your guide. I used the code from http://www.quirksmode.org/js/detect.html.

<html>
<head>
<script type="text/javascript">
<!--
var BrowserDetect = {
init: function () {
    this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
    this.version = this.searchVersion(navigator.userAgent)
        || this.searchVersion(navigator.appVersion)
        || "an unknown version";
    this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
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",
        versionSearch: "Version"
    },
    {
        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"
    }
],
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();


</script>
//-->
</head>
<body>
<script type="text/javascript">
<!--
document.write('<p class="accent">You\'re using ' + BrowserDetect.browser + ' ' + BrowserDetect.version + ' on ' + BrowserDetect.OS + '!</p>');
// -->
</script>
<script type="text/javascript">
if((BrowserDetect.browser == 'Chrome') || (BrowserDetect.browser == 'Safari')) {
alert('Good job!');
} else {
alert('You are living in a cave, dude! Change your browser.');
    if(BrowserDetect.browser == 'firefox') {
 alert('I mean - firefox is OK, but bit heavy');
    }
}
</script>

</body>
</html>

Detect Chrome and Safari in Javascript

1 Answers1