With support for WebAssembly coming into all new major browsers, how can I check whether the current browser which is visiting my website supports it?
There are a few ways that you can detect the presence of WebAssembly. The basic one is to check whether WebAssembly
if of type "object"
in the global scope, but "global scope" is a tricky thing to get to in different JavaScript environments (main browser thread, worker, node.js).
Doing so is also not technically sufficient because you could have WebAssembly support but be unable to actually compile or instantiate because of CSP (and exactly what CSP disallows isn't standardized yet, work ongoing here).
A conservative check could be as follows:
const supported = (() => {
try {
if (typeof WebAssembly === "object"
&& typeof WebAssembly.instantiate === "function") {
const module = new WebAssembly.Module(Uint8Array.of(0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00));
if (module instanceof WebAssembly.Module)
return new WebAssembly.Instance(module) instanceof WebAssembly.Instance;
}
} catch (e) {
}
return false;
})();
console.log(supported ? "WebAssembly is supported" : "WebAssembly is not supported");
It does the following:
WebAssembly
is accessible in the current scope. If it's not global we don't really care!.instantiate
function, which we don't actually use here but which you'd want to use when you actually instantiate because it's asynchronous and can handle large modules on the main thread or off.'\0', 'a', 's', 'm'
, followed by version number 1 encoded as a uint32
), and see if we get a WebAssembly.Module
out of it.WebAssembly.Instance
.This is a bit much but should work regardless of: