Is there a way to detect Apple Silicon Mac in JavaScript?
Properties in navigator don't seem to be very helpful, for example, navigator.platform is set to MacIntel and the user agent is exactly the same.
The why part: I have two versions of my software available, for Intel and for Apple Silicon. Asking users "Is your Mac Apple Silicon or Intel?" is not great.
I have a solution, but it feels pretty fragile.
Check the OS, since Apple Silicon only exists with 10_15 or higher:
navigator.userAgent.match(/OS X 10_([789]|1[01234])/)
Check the GPU using webgl:
var w = document.createElement("canvas").getContext("webgl");
var d = w.getExtension('WEBGL_debug_renderer_info');
var g = d && w.getParameter(d.UNMASKED_RENDERER_WEBGL) || "";
if (g.match(/Apple/) && !g.match(/Apple GPU/)) {
...definitely arm...
}
If you see Apple GPU, then it's Safari which hides the GPU to prevent fingerprinting. Dig into capabilities:
if (w.getSupportedExtensions().indexOf("WEBGL_compressed_texture_s3tc_srgb") == -1) {
...probably arm...
}
(I compared the capabilities of my MacBook Pro to a new M1 Air, and that one is missing on the Air. All others were identical.)
The approach I'm taking is to give the user a choice, but use this test to choose the default.
If anyone has another idea of something that might be peculiar to help narrow down if it's an M1, I'm happy to experiment...
Update: As Romain points out in the comments, Apple added support for the missing extension in Big Sur, so this isn't working now (in Safari; it still works in Chrome & Firefox).
This is possible via navigator.userAgentData now, although it isn't supported on every browser.
await navigator.userAgentData.getHighEntropyValues(['architecture'])
{
architecture: "arm"
brands: [{…}, {…}, {…}],
mobile: false,
platform: "macOS"
}
https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData/getHighEntropyValues
There's a library you can use that gives you information about the operating system that's in Node.js - os (const os = require('os')). It has a method returning the cpu cores - os.cpus(), you can just take the first element and check if it's the exact model you want or if it simply contains "Apple M1" as a string in its model - let isM1 = cpuCore[0].model.includes("Apple M1").
You might also check the os.arch() method as it:
Returns the operating system CPU architecture for which the Node.js binary was compiled.
I would however advice high levels of caution when using the arch method because I have had several occurrences in which an M1 Mac returned x64 from os.arch() instead of arm64 which is the expected result.
EDIT: Might be better to replace cpuCore[0].model.includes("Apple M1") with either a regular expression or cpuCore[0].model.includes("Apple") since the earliest versions of M1 macs return 'Apple processor' under model.
os.arch() doesn't return the current computer architecture — it returns the architecture for which the application has been built. –
Ivy arm64 is the expected result. It's in fact so expected for Node.js to be compiled by your current OS that process.arch which is the exact same function implies they are the same in the example given in the docs - nodejs.org/api/process.html#process_process_arch –
Beatnik os.arch() gives the architecture of the app and this depends on what version of the app the user has downloaded. –
Ivy os.arch is depicted here: github.com/nodejs/node/issues/41900#issuecomment-1113511254 –
Casarez I use UAParser.js V2 for this, which is free and open source. https://github.com/faisalman/ua-parser-js
In V2 they added a withClientHints chained function which returns a promise. Under the hood it uses the getHighEntropyValues method that user3717031 mentioned. It can be used like this:
UAParser().withClientHints().then(function(result) {
var CPU = result.cpu.architecture; // returns "arm64" on macOS ARM
});
© 2022 - 2024 — McMap. All rights reserved.