Requirejs, Backbonejs browser support function

Question

I need to check whether the browser is supported by my application and I do this the following way:

main.js (main require.js module)

define(['underscore', 'backbone', 'views/mainView', 'views/oldBrowser', 'ui', function(_, Backbone, mainView, oldBrowser){

var _browserHandshaking = function(){
    var browserSupportedCookie = $.cookie('browserSupported');
    var browserNameCookie = $.cookie('browserName');
    var browserVersionCookie = $.cookie('browserVersion');

    if(browserSupportedCookie === null){
        if(/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
            $.ui.browserName = 'chrome';
        } else if(/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
            $.ui.browserName = 'opera';
            /Version[\/\s](\d+\.\d+)/.test(navigator.userAgent);
        } else if(/MSIE (\d+\.\d+);/.test(navigator.userAgent)){
            $.ui.browserName = 'ie';
        } else if(/Safari[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
            $.ui.browserName = 'safari';
            /Version[\/\s](\d+\.\d+)/.test(navigator.userAgent);
        } else if(/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
            $.ui.browserName = 'firefox';
        } else if(/webOS/i.test(navigator.userAgent)){
            $.ui.browserName = 'webos';
        } else if(/Android/i.test(navigator.userAgent)){
            $.ui.browserName = 'android'
        } else if(/iPhone/i.test(navigator.userAgent)){
            $.ui.browserName = 'iphone';
        } else if(/iPod/i.test(navigator.userAgent)){
            $.ui.browserName = 'ipod';
        } else if(/BlackBerry/i.test(navigator.userAgent)){
            $.ui.browserName = 'blackberry';
        }

        if($.ui.browserName !== false){

            // Set browser version.
            if(!$.ui.browserVersion){
                $.ui.browserVersion = parseFloat(new Number(RegExp.$1));
            }

            for(var browserName in $.ui.supportedBrowsers){
                if($.ui.browserName === browserName){
                    if($.ui.browserVersion >= $.ui.supportedBrowsers[browserName]){
                        $.ui.browserSupported = true;
                        break;
                    }
                }
            }

            $.cookie('browserVersion', $.ui.browserVersion, { expires: 7 });
            $.cookie('browserName', $.ui.browserName, { expires: 7 });
            $.cookie('browserSupported', $.ui.browserSupported, { expires: 7 });
        }           
    } else {
        $.ui.browserSupported = browserSupportedCookie;
        $.ui.browserName = browserNameCookie;
        $.ui.browserVersion = browserVersionCookie;
    }
};

_browserHandshaking.call(this);

var Router = Backbone.Router.extend({
    routes: {
        "old-browser": "oldBrowser",
        "*actions": "main",
    },
    oldBrowser: function(){
        oldBrowser.render();
    },
    main: function(){
        mainView.render();
    }
});

$.ui.router = new Router();

// Start routing.
Backbone.history.start({
    pushState: true,
    root: $.ui.rootDir
});

});

Is there a function in Backbone.js that triggers at every action, there I could easily implement this:

preRouting: function(){
  if(!$.ui.browserSupported){
    return false;
  }

  return true;
}

I just need to check, if the browser is supported, and if it is supported it can call the mainView, else the oldBrowser view should be triggered, I just don't want to do this at each route function call.

Someone has a better solution for this? And does someone know if it is possible to create a check that is basically a prelimiter for a route function call.

Thanks for help :)

Welcome to 2012...we stopped checking for browser support like this a few years ago. — blockhead, Jul 20 '12 at 17:47
I still don't want to support browser that don't support pushstate, css3 stuff and animations, and no I don't want to use modernizer. — onlineracoon, Jul 20 '12 at 17:51

score 1 · Accepted Answer · edited May 23 '17 at 12:04

Based on comments, you can check for push state with: (from Can use pushState )

var hasPushstate = !!(window.history && history.pushState);

css3 animations with: ( from Detect css transitions using javascript (and without modernizr)? )

function supportsTransitions() {
    var b = document.body || document.documentElement;
    var s = b.style;
    var p = 'transition';
    if(typeof s[p] == 'string') {return true; }

    // Tests for vendor specific prop
    v = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
    p = p.charAt(0).toUpperCase() + p.substr(1);
    for(var i=0; i<v.length; i++) {
      if(typeof s[v[i] + p] == 'string') { return true; }
    }
    return false;
}
var hasCSS3Transitions = supportsTransitions();

There's no need to check the browser name/version if you can simply check to see if the browser has the functionality your application needs.

Requirejs, Backbonejs browser support function

1 Answers1