I’ve been testing a game with some navigators and in some of them, the game is not working correctly, it only shows a black screen with an html element I use in it (but even that is cut in half), so I need to detect if the browser is fully compatible or else just show a message telling that this browser isn’t compatible with the game.
I tried this by detecting if the browser is Safari, Google Chrome, Opera, etc. since I know these are fully compatible, and this works, but it’s compatible with another one called 360 browser (a chinese one) and I have no idea how to detect if this is the browser currently used…
any idea?
I found a workaround for this, it seems that in every chrome-based, non-compatible browser, it’s using a Chrome version inferior to 80, so I’m validating that version with the UserAgent string. I’ll leave my code for that if someone needs it:
let isCompatible = parseInt(navigator.userAgent.substr(navigator.userAgent.indexOf('Chrome/') + 7,2))>=80;
And considering that maybe there’s many people with this problem, I’m gonna leave my full function in here:
isCompatible() {
// Opera 8.0+
let isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
let isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+ "[object HTMLElementConstructor]"
let isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));
// Internet Explorer 6-11
let isIE = false || !!document.documentMode;
// Edge 20+
let isEdge = !isIE && !!window.StyleMedia;
// Chrome 1 - 71
let ChromeCheck = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
// Blink engine detection
let isBlink = (ChromeCheck || isOpera) && !!window.CSS;
//360 Browser or other compatible Chrome-based browsers
let is360 = parseInt(navigator.userAgent.substr(navigator.userAgent.indexOf('Chrome/') + 7,2))>=80;
//Code source: https://jsfiddle.net/6spj1059/
let isChromium = window.chrome;
let winNav = window.navigator;
let vendorName = winNav.vendor;
let Opera = typeof window.opr !== "undefined";
let isIEedge = winNav.userAgent.indexOf("Edge") > -1;
let isIOSChrome = winNav.userAgent.match("CriOS");
let itISChrome;
if (isIOSChrome) {
// is Google Chrome on IOS
itISChrome = true;
} else if(
isChromium !== null &&
typeof isChromium !== "undefined" &&
vendorName === "Google Inc." &&
Opera === false &&
isIEedge === false
) {
// is Google Chrome
itISChrome = true;
} else {
// not Google Chrome
itISChrome = false;
}
let itISSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);
let isiOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(isOpera || (itISSafari && isiOS) || itISChrome || is360) {
alert("You can run the game ")
return true;
} else {
alert("You can not run the game ")
return false;
}
}
The first part of the code is based on one I found (there’s the source), but I complemented it a bit more because it wasn’t working for Chrome, also, the code in there to detect Edge was detecting other browsers as Edge, so I didn’t take that in account and just checked for Opera, Safari, Chrome and 360 browser, as well as compatible Chrome-based browsers