How can I detect if the browser is fully compatible with phaser?

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;
1 Like

Thank you for sharing your code! I’m looking into browser compatibility myself but couldn’t find many resources so your code is very helpful.

If you are worried about compatibility, Babel.js is a free transcompiler used to support older JavaScript engines.

1 Like

This could be useful, thank you!

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

2 Likes

Thank you, I’ll steal this!

1 Like