Browser detection code

[amunn]

There seem to be various issues with Safari (see e.g. #809, #1605, #1851) and also mobile users, so I would like to be able to detect the browser and OS that participants are using and end the experiment if they are using that particular browser/OS combination. I've played around with jsPsych.data.get() but I haven't managed to figure out how to extract the relevant data.

Can someone help?

It might be very useful to have a general plugin for browser detection, in fact, since I assume I'm not the only person needing to do this.

[amunn]

Browser detection is a bit of a minefield, so I decided to use an external library bowser which seems well maintained and allows for quite fine-grained detection abilities.

My approach with respect to the jsPsych code was to use the on_start and on_finish parameters of an html-keyboard-response trial to conditionally present the browser check message (either reject or accept) and conditionally continue or end the experiment. I'd be interested in comments on this method or if there is another more elegant way to do this.

Thanks to Paulo Cereda for discussion.

// browser rejection routine
// Copyright 2021 Alan Munn
// Use this as the first task on your timeline to verify browser
// MIT Licence


// External libary here: https://github.com/lancedikson/bowser
var script = document.createElement('script');
script.onload = function () {
};
script.src = "https://cdn.jsdelivr.net/npm/bowser@2.5.3/es5.min.js";
document.head.appendChild(script);

// The bowser library allows fine-grained specification of browser
// properties. Here we allow only chrome, firefox and opera on
// desktop platforms

const allowedBrowsers = {
  desktop: {
    chrome: '>20',
    firefox: '>31',
    opera: '>50',
  }
};

var check_html = {
  accept: `<h2>Your browser can be used for this experiment!</h2>
<p>Hit any key to begin the experiment</p>`,
  reject: `<h2>Your browser cannot be used for this experiment!</h2>
 <h3>Mobile devices and Safari are not supported. Mac users can use
 Firefox or Chrome instead of Safari.</h3>
<p>Hit any key to continue.</p>`
};

var browser_check = {
  type: 'html-keyboard-response',
  stimulus: function() {
    return check_html.accept;
  };,
  on_start: function(browser_check) {
    const browser = bowser.getParser(window.navigator.userAgent);
    const isValidBrowser = browser.satisfies(allowedBrowsers);
    console.log(browser);
    if (isValidBrowser) {};
    else {
      browser_check.stimulus = check_html.reject
    };
  },
  on_finish: function() {
    const browser = bowser.getParser(window.navigator.userAgent);
    const isValidBrowser = browser.satisfies(allowedBrowsers);
    if (isValidBrowser) {};
    else {
      jsPsych.endExperiment('The experiment is over')
    };
  },
  choices: jsPsych.ALL_KEYS
};