CODEWITHSUNDEEP
javascriptecmascript-6windows-11
DHamrick
DHamrick

Reputation: 8488

Detect Windows 11 via Javascript

I'm trying to detect if the user is using Windows 11 in order to serve the correct binaries when they click a download button. I've found Microsoft's suggestion for how to do this here. They suggest using the navigator.userAgentData.getHighEntropyValues function which returns a promise containing the platform version. Here is the code they suggest:

navigator.userAgentData.getHighEntropyValues(["platformVersion"])
 .then(ua => {
   if (navigator.userAgentData.platform === "Windows") {
     const majorPlatformVersion = parseInt(ua.platformVersion.split('.')[0]);
     if (majorPlatformVersion >= 13) {
       console.log("Windows 11 or later");
      }
      else if (majorPlatformVersion > 0) {
        console.log("Windows 10");
      }
      else {
        console.log("Before Windows 10");
      }
   }
   else {
     console.log("Not running on Windows");
   }
 });

My problem is that this function is asynchronous and returns a promise instead of returning the value. I don't want to have to convert all of the code I use to parse user agents for every platform in to an async function.

At first, I thought I would use await instead of using the promise like this:

let ua = await navigator.userAgentData.getHighEntropyValues(["platformVersion"])

However, this meant that I would need to make the function that contains it async. And since this same code needs to work on older browsers that don't support async and ones that do, I can't do that.

Is there a way to detect if the user is using Windows 11 without this API? Or using this API but in a way that doesn't require async?

Upvotes: 2

Views: 3090

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074028

My problem is that this function uses es6 and returns a promise instead of returning the value.

The only "ES6" (ES2015) there is the arrow function. You can use a traditional function if you don't want to use an arrow function. The promise is provided by the platform, not the language.

I don't want to have to convert all of the code I use to parse user agents for every platform in to an async function.

You don't have to, you can do what the code you've shown does: Use the .then method. Yes, it will be asynchronous (the high-entropy information is only available asynchronously, because it may have to ask the user for permission), but it will still work on browsers that don't support async functions (provided of course they support getHighEntropyValues).

Otherwise, you'll have to fall back on parsing navigator.userAgent and that's notoriously unreliable. You'll want that anyway for agents that don't support getHighEntropyValues or users who deny permission, so you can do your best guess for the drop-down. Be sure to provide a drop-down (or similar) so the user can A) Correct an incorrect guess, and B) Download for use later on another platform.

Upvotes: 3

Related Questions