如何检查浏览器是否支持WebAssembly？

Question

由于支持WebAssembly进入所有新的主流浏览器,我如何检查访问我网站的当前浏览器是否支持它？

Answer 1

有几种方法可以检测WebAssembly的存在.基本的一个是检查是否在全局范围内WebAssembly的类型"object",但"全局范围"在不同的JavaScript环境(主浏览器线程,worker,node.js)中是一个棘手的事情.

这样做在技术上也是不够的,因为你可以拥有WebAssembly支持但由于CSP而无法实际编译或实例化(而CSP不允许的还没有标准化,这里正在进行).

保守检查可以如下:

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");

它执行以下操作:

• 检查WebAssembly当前范围内是否可以访问.如果它不是全球性的,我们真的不在乎!
• 看看它是否具有这个.instantiate功能,我们实际上并没有在这里使用它,而是在实际实例化时要使用它,因为它是异步的并且可以在主线程上处理大型模块或关闭.
• 尝试同步编译最小的模块(幻数'\0', 'a', 's', 'm',然后编码为1的版本号1 uint32),看看我们是否得到了WebAssembly.Module它.
• 最后,尝试同步实例化该模块,并检查它是否为a WebAssembly.Instance.

这有点多,但无论如何都应该有效:

• 代码正在运行的地方(主线程,worker,node.js).
• CSP如何最终实现标准化.