如何在UI线程与Service Worker间共享WebAssembly模块？

这确实是个挺棘手的场景——既要让主线程和Service Worker共享Wasm模块，又要避免重复初始化的开销，还要应对Service Worker的闲置回收问题。结合Web标准的当前支持，我推荐几个可行的方案，按优先级排序：

方案1：利用IndexedDB缓存编译后的Wasm Module #

这是目前最稳妥、兼容性最好的标准方案。现代浏览器支持将编译后的WebAssembly.Module对象存入IndexedDB（它支持结构化克隆），这样不管是主线程还是Service Worker，都可以先从缓存中读取已编译的模块，跳过耗时的编译步骤（就是你提到的800ms开销），直接实例化。

核心思路： #

1. 首次加载时，主线程或Service Worker从网络获取Wasm二进制文件，编译成WebAssembly.Module，存入IndexedDB。
2. 后续任何上下文（主线程/重新激活的Service Worker）启动时，先检查IndexedDB中是否有缓存的Module，有则直接使用，无则重新加载编译并缓存。

代码示例： #

通用的缓存/读取逻辑（主线程和Service Worker都可复用）

async function openWasmCacheDB() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('WasmCache', 1);
    
    request.onupgradeneeded = (e) => {
      const db = e.target.result;
      // 创建存储已编译Module的对象仓库
      if (!db.objectStoreNames.contains('compiledModules')) {
        db.createObjectStore('compiledModules');
      }
    };
    
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
}

async function getOrCompileWasmModule(moduleKey, wasmUrl) {
  const db = await openWasmCacheDB();
  
  // 尝试读取缓存的Module
  const readTx = db.transaction('compiledModules', 'readonly');
  const cachedModule = await readTx.objectStore('compiledModules').get(moduleKey);
  
  if (cachedModule) {
    await readTx.done;
    return cachedModule;
  }
  
  // 无缓存，加载并编译
  const response = await fetch(wasmUrl);
  const wasmBytes = await response.arrayBuffer();
  const compiledModule = await WebAssembly.compile(wasmBytes);
  
  // 存入缓存
  const writeTx = db.transaction('compiledModules', 'readwrite');
  writeTx.objectStore('compiledModules').put(compiledModule, moduleKey);
  await writeTx.done;
  
  return compiledModule;
}

主线程中实例化

// 主线程启动时获取模块
const wasmModule = await getOrCompileWasmModule('complex-operation', '/path/to/your/module.wasm');
const wasmInstance = await WebAssembly.instantiate(wasmModule, {
  // 配置你的导入对象（比如宿主环境的函数、内存等）
  env: {
    memory: new WebAssembly.Memory({ initial: 256 }),
    log: (msg) => console.log(msg)
  }
});

// 使用实例
wasmInstance.exports.yourComplexFunction();

Service Worker中实例化

self.addEventListener('activate', async (event) => {
  // Service Worker激活时预加载Wasm模块
  const wasmModule = await getOrCompileWasmModule('complex-operation', '/path/to/your/module.wasm');
  self.wasmInstance = await WebAssembly.instantiate(wasmModule, {
    // 注意Service Worker中的导入对象要适配环境
    env: {
      memory: new WebAssembly.Memory({ initial: 256 }),
      log: (msg) => console.log(`SW: ${msg}`)
    }
  });
});

// 在推送事件中使用实例
self.addEventListener('push', (event) => {
  event.waitUntil(
    (async () => {
      const result = self.wasmInstance.exports.processPushNotification(event.data.json());
      await self.registration.showNotification('计算结果', { body: result.toString() });
    })()
  );
});

这个方案完美解决了Service Worker闲置回收后重新初始化的问题——因为编译好的Module存在IndexedDB，重新加载时只需要实例化，耗时远低于重新编译。

方案2：主线程托管Wasm实例，通过PostMessage共享计算结果 #

如果你的Service Worker不需要独立运行Wasm，只是在处理推送时需要调用Wasm的计算能力，且大部分情况下用户的页面处于打开状态，可以让主线程负责维护Wasm实例，Service Worker通过消息请求主线程执行计算。

核心思路： #

1. 主线程保持Wasm实例活跃，监听来自Service Worker的消息。
2. Service Worker收到推送事件时，尝试找到当前打开的页面客户端，发送消息请求计算。
3. 主线程执行Wasm计算后，将结果返回给Service Worker，由其处理推送通知。

代码示例： #

主线程监听消息

// 假设已初始化好wasmInstance
navigator.serviceWorker.addEventListener('message', async (event) => {
  if (event.data.type === 'run-wasm-calc') {
    const result = wasmInstance.exports.complexOperation(event.data.payload);
    // 向Service Worker返回结果
    event.source.postMessage({ type: 'calc-result', result });
  }
});

Service Worker处理推送事件

self.addEventListener('push', async (event) => {
  event.waitUntil(
    (async () => {
      // 找到当前打开的页面客户端
      const clients = await self.clients.matchAll({ 
        type: 'window', 
        includeUncontrolled: true 
      });
      
      if (clients.length > 0) {
        // 发送计算请求
        const client = clients[0];
        const messageChannel = new MessageChannel();
        
        await new Promise((resolve) => {
          messageChannel.port1.onmessage = (msg) => {
            if (msg.data.type === 'calc-result') {
              self.registration.showNotification('推送通知', { 
                body: `计算结果：${msg.data.result}` 
              });
              resolve();
            }
          };
          
          client.postMessage(
            { type: 'run-wasm-calc', payload: event.data.json() },
            [messageChannel.port2]
          );
        });
      } else {
        // 页面已关闭，降级处理（比如重新初始化Wasm，或使用预计算数据）
        const fallbackResult = await handleFallbackCalculation();
        self.registration.showNotification('推送通知', { 
          body: `降级结果：${fallbackResult}` 
        });
      }
    })()
  );
});

这个方案的优点是不需要在Service Worker中维护Wasm实例，缺点是依赖页面处于打开状态，适合推送触发时用户大概率在线的场景。

方案3：使用SharedArrayBuffer共享Wasm内存（进阶） #

如果你的场景对性能要求极高，且能处理跨上下文的内存同步，可以让主线程和Service Worker各自拥有Wasm实例，但共享同一块内存。不过这个方案需要配置跨源隔离头，且复杂度较高。

前置要求： #

服务器必须设置以下HTTP头，启用跨源隔离：

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

核心思路： #

1. 主线程创建SharedArrayBuffer作为Wasm的内存。
2. 主线程实例化Wasm时使用该共享内存，并将内存发送给Service Worker。
3. Service Worker使用相同的共享内存实例化自己的Wasm模块，这样两个上下文可以直接读写同一块内存，避免数据序列化开销。

代码示例： #

主线程初始化共享内存并发送给Service Worker

// 创建共享内存（大小根据你的Wasm需求调整）
const sharedMemory = new SharedArrayBuffer(1024 * 1024); // 1MB

// 实例化Wasm时使用共享内存
const wasmModule = await getOrCompileWasmModule('complex-operation', '/path/to/module.wasm');
const wasmInstance = await WebAssembly.instantiate(wasmModule, {
  env: {
    memory: new WebAssembly.Memory({ 
      buffer: sharedMemory, 
      initial: 256, 
      maximum: 256 
    })
  }
});

// 将共享内存发送给Service Worker
if (navigator.serviceWorker.controller) {
  navigator.serviceWorker.controller.postMessage(
    { type: 'set-shared-memory', memory: sharedMemory },
    [sharedMemory]
  );
}

Service Worker接收内存并实例化

let swWasmInstance;

self.addEventListener('message', async (event) => {
  if (event.data.type === 'set-shared-memory') {
    const wasmModule = await getOrCompileWasmModule('complex-operation', '/path/to/module.wasm');
    swWasmInstance = await WebAssembly.instantiate(wasmModule, {
      env: {
        memory: new WebAssembly.Memory({ 
          buffer: event.data.memory, 
          initial: 256, 
          maximum: 256 
        })
      }
    });
  }
});

// 使用共享内存进行计算
self.addEventListener('push', (event) => {
  event.waitUntil(
    (async () => {
      // 写入数据到共享内存（需要和Wasm约定内存地址）
      const dataView = new Uint32Array(swWasmInstance.exports.memory.buffer);
      dataView[0] = event.data.json().input;
      
      // 调用Wasm函数计算
      swWasmInstance.exports.processData();
      
      // 从共享内存读取结果
      const result = dataView[1];
      await self.registration.showNotification('计算结果', { body: result.toString() });
    })()
  );
});

这个方案的性能最优，但需要处理内存同步问题（比如用Atomics操作确保读写顺序），且兼容性略低于方案1，适合对性能要求极高的场景。

内容的提问来源于stack exchange，提问作者Justin D.