CODEWITHSUNDEEP
javascriptmicrosoft-edgeuser-agentnavigatorarcgis-js-api
Salfej
Salfej

Reputation: 61

Detecting Edge Legacy browser, not Edge Chromium

ArcGIS is depreciating use of IE11 and Legacy Edge browsers with current and future versions of their JavaScript API.

https://www.esri.com/arcgis-blog/products/arcgis/announcements/so-long-internet-explorer-11/

I'd like to know how to target legacy version of edge and alert users things may not work properly. Using:

navigator.userAgent.indexOf("Edge/") > -1 || navigator.userAgent.indexOf("Edg/") > -1;

does not work since Chromium Edge is still edge in the user agent. Is there anything else I could use that would allow me to differentiate between the two?

Upvotes: 2

Views: 3131

Answers (3)

Luis Lobo
Luis Lobo

Reputation: 859

All versions of Edge have the word "Edg" in the userAgent followed by X and ending with "/", where X:

  • Edge = Legacy
  • Edg = Based on chromium
  • EdgA = Android
  • EdgiOS = iOS

therefore, just a few regular expressions are enough to identify the desired cases:

function isEdge(versionName, userAgent) {
    versionName = versionName ? versionName.toLowerCase() : "desktop"
    userAgent = userAgent ? userAgent : navigator.userAgent

    const options = {
        desktop: () => (/Edge?\//).test(userAgent),
        chromium: () => (/Edg\//).test(userAgent),
        legacy: () => (/Edge\//).test(userAgent),
        mobile: () => (/Edg(A|iOS)\//).test(userAgent),
        android: () => (/EdgA\//).test(userAgent),
        ios: () => (/EdgiOS\//).test(userAgent)
    }
    return options[versionName]()
}

Example of use:

// checks if the browser is edge on a desktop (just windows, right?)
isEdge('desktop'); // boolean
isEdge(); // boolean (empty = 'desktop')

// check if the browser is the edge and the version is based on chromium (version with the blue and green logo with waveform)
isEdge('chromium'); // boolean

// check if the browser is the edge and the version is legacy (version with blue logo similar to internet explorer)
isEdge('legacy'); // boolean

// check if the browser is the edge for android OR iOS
isEdge('mobile'); // boolean

// check if the browser is the edge for android
isEdge('android'); // boolean

// check if the browser is the edge for iOS
isEdge('ios'); // boolean

https://learn.microsoft.com/pt-br/microsoft-edge/web-platform/user-agent-string

Do the user agents of Edge 12 and 13 differ?

Upvotes: 1

Renato Sant'Anna
Renato Sant'Anna

Reputation: 458

You could use the window.navigator userAgent to check whether the browser is Microsoft Chromium Edge or Chrome.

Code as below:

<script>
    var browser = (function (agent) {
        switch (true) {
            case agent.indexOf("edge") > -1: return "edge";
            case agent.indexOf("edg/") > -1: return "chromium based edge (dev or canary)"; // Match also / to avoid matching for the older Edge
            case agent.indexOf("opr") > -1 && !!window.opr: return "opera";
            case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";
            case agent.indexOf("trident") > -1: return "ie";
            case agent.indexOf("firefox") > -1: return "firefox";
            case agent.indexOf("safari") > -1: return "safari";
            default: return "other";
        }
    })(window.navigator.userAgent.toLowerCase());
    document.body.innerHTML = window.navigator.userAgent.toLowerCase() + "<br>" + browser;
</script>

Upvotes: 1

Yu Zhou
Yu Zhou

Reputation: 12961

It's Edg in Edge Chromium user agent and Edge in Edge Legacy user agent. So you only need to use Edge to detect Edge Legacy:

navigator.userAgent.indexOf("Edge/") > -1

Upvotes: 1

Related Questions