PWA场景下如何预加载JS Worker与WASM脚本实现离线可用？

一、修复link标签预加载写法 #

1. 优先选择prefetch（符合不需要立即使用的需求） #

之前WASM预加载失效的核心原因是缺失as和crossorigin属性，修复后的写法如下，Chrome等现代浏览器可正常识别：

<!-- WebAssembly 预加载 -->
<link rel="prefetch" href="/wasm/bar.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" importance="low">
<!-- JS Worker 预加载 -->
<link rel="prefetch" href="/js/baz.worker.js" as="worker" type="text/javascript" importance="low">

2. 高概率使用场景改用preload的正确写法 #

如果90%以上用户会用到这些资源，preload更稳妥，资源加载优先级更高，不会被浏览器轻易跳过，对应写法如下：

<!-- WebAssembly 预加载 -->
<link rel="preload" href="/wasm/bar.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" importance="low">
<!-- JS Worker 预加载 -->
<link rel="preload" href="/js/baz.worker.js" as="worker" type="text/javascript" importance="low">

你看到的preload资源未在几秒内使用的警告属于浏览器通用提醒，不影响资源加载和ServiceWorker缓存逻辑，PWA离线场景下可直接忽略。

二、更可靠的兜底方案（100%兼容） #

如果担心部分浏览器对link预加载的支持问题，可在页面load事件触发后主动发起fetch请求，完全不阻塞页面渲染，同时能确保ServiceWorker正常拦截资源存入CacheStorage：

window.addEventListener('load', async () => {
  try {
    await Promise.all([
      fetch('/wasm/bar.wasm'),
      fetch('/js/baz.worker.js')
    ])
  } catch (e) {
    // 弱网环境下加载失败可忽略，后续用户触发操作时会重新加载
  }
})

内容的提问来源于stack exchange，提问作者Alexis Delrieu