navigator.userAgent in Sortable code throws Issue warning in Chrome Canary

[tmb-github]

The navigator.userAgent code in Sortable raises a future deprecation warning in Chrome Canary 92. The replacement routine now available in Chromium browsers is navigator.userAgentData, which provides a non-regEx means of identifying browsers and platforms.

To see the warning, open DevTools in Chrome Canary 92 or later, then open the sample site for the repo.

You'll see the issue flagged in blue at the top, which can be read in the issues panel:

Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform
A page or script is accessing at least one of navigator.userAgent, navigator.appVersion, and navigator.platform. In a future version of Chrome, the amount of information available in the User Agent string will be reduced.
To fix this issue, replace the usage of navigator.userAgent, navigator.appVersion, and navigator.platform with feature detection, progressive enhancement, or migrate to navigator.userAgentData.
Learn more: User-Agent String Reduction

The link at the end is to an article that has a more useful article at its bottom, which provides coding examples for the new navigator.userAgentData method:

function isCompatible(item) {
  // In real life you most likely have more complex rules here
  return ['Chromium', 'Google Chrome', 'NewBrowser'].includes(item.brand);
}
if (navigator.userAgentData.brands.filter(isCompatible).length > 0) {
  // browser reports as compatible
}

Based on this code, the first 5 variables that make use of navigator.userAgent in Sortable could be revised this way (with full knowledge that IE is dead and will only use the prior method, and that Firefox and Safari have yet to implement the method, so their exact strings are unknown at present):

function userAgent(name, pattern) {
    function brandTest(item) {
        return [name].includes(item.brand);
    };
    if (typeof window !== 'undefined' && window.navigator) {
        return (
            navigator.userAgentData
            ? (navigator.userAgentData.brands.filter(brandTest).length > 0)
            : !!navigator.userAgent.match(pattern)
        );
    }
}

var IE11OrLess = userAgent('MSIE', /(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i);
var Edge = userAgent('Edge', /Edge/i);
var FireFox = userAgent('Firefox', /firefox/i);
var Safari = userAgent('Safari', /safari/i) && !userAgent('Chrome', /chrome/i) && !userAgent('Android', /android/i);
var IOS = userAgent('IOS', /iP(ad|od|hone)/i);

The ChromeForAndroid variable in Sortable is not so easily translated, because it is asynchronous: it requires use of the .getHighEntropyValues() method, which returns a Promise:

navigator.userAgentData.getHighEntropyValues(['platform']).then(function (ua) {
    return ua.platform; 
});

But there may be a way of retrieving this at the start of the Sortable routine and have the .then() of the Promise kick off the rest of the routines in the code.

Thanks for maintaining Sortable! I hope this helps.

[theo-staizen]

+1 on this issue as it is now appearing on stable Chrome as well. This is coming from the feature.js dependency
arielsalminen/feature.js#81