Javascript Web Worker 的功能检测模块支持

Question

从 Chrome 80 开始，您可以使用 new Worker("worker.js", { type: "module" }) 创建模块类型的 worker，然后在 worker 脚本中使用 import 等模块功能。然而其他浏览器仍在努力支持这一点，因此使用它需要功能检测和后备。

是否有方便简单的方法来为工人提供功能检测模块支持？

请注意，在某些平台（例如 Cordova）上，创建 worker 实际上并非易事，并且涉及大量变通方法，因此在纯 JS 中运行的东西将是理想的。

Answer 1

作为每个 initOptions 的功能，您可以使用我称之为“字典陷阱”的功能。

这是一个对象，您可以在其上设置属性 getter（您要测试的对象），并让此 getter 在获取布尔值时切换一个布尔值由您正在测试的构造函数。这适用于许多此类功能，Worker 的 type 也不例外。

使用 Worker 唯一需要注意的事情是避免实际启动一个（即使启动一个空的 Worker 也意味着新的事件循环必须运行、新的 JS 上下文和这些不是小操作）并避免它发出无用的网络请求（即使是 404 也会占用资源）。

所以这里有这样一个测试者，使用字符串"blob://"有办法避免这两种情况

function supportsWorkerType() {
  let supports = false;
  const tester = {
    get type() { supports = true; } // it's been called, it's supported
  };
  try {
    // We use "blob://" as url to avoid an useless network request.
    // This will either throw in Chrome
    // either fire an error event in Firefox
    // which is perfect since
    // we don't need the worker to actually start,
    // checking for the type of the script is done before trying to load it.
    const worker = new Worker('blob://', tester);
  } finally {
    return supports;
  }
}

console.log( supportsWorkerType() );

Javascript Web Worker 的功能检测模块支持

Javascript feature detect module support for Web Workers

javascript

web-worker

es6-modules

browser-feature-detection