如何预加载js worker和wasm脚本以供脱机使用(pwa)？
我想强制浏览器预加载一个JavaScript worker和一个WebAssembly脚本。加载时，我有一个将这些脚本放在CacheStorage中的ServiceWorker。
对于图像，我使用了以下<link>标记，效果很好：
<link rel="prefetch" href="/img/foo.png" as="image" type="image/png" importance="low" />因此，我在wasm和js脚本中尝试了相同的方法：
<link rel="prefetch" href="/wasm/bar.wasm" type="application/wasm" importance="low" />
<link rel="prefetch" href="/js/baz.worker.js" as="script" type="text/javascript" importance="low" />但是，看起来浏览器(Chrome)不会加载prefetch版本中的这些脚本。所以我试着使用rel="preload"。
但是我不知道如何为wasm文件和js worker文件的as属性填充内容，我得到了以下警告：The resource http://localhost:3000/wasm/bar.wasm was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.。
如果用户执行需要这些文件的操作，浏览器会很好地加载它们，然后我们就可以在脱机时使用它们。
在load事件之前不需要这些脚本。当浏览器发出load事件时，我可以发送fetch请求吗？但是我认为让浏览器用link标签来管理这样的事情会更好。在我的例子中，用户很可能需要这个脚本(90%+)，所以预加载是有意义的，但理论上，我只想预取内容。
您建议如何预加载这些文件以供脱机使用(pwa)？
回答 1
Stack Overflow用户
发布于 2021-09-27 15:02:17
看起来使用HTTP发送一个fetch请求可以很好地将脚本放到CacheStorage中。
/**
* Preload resources for offline pwa use
*/
window.addEventListener('load', () => {
fetch('/js/baz.worker.js');
fetch('/wasm/bar.wasm');
});通过在load事件之后发送这些请求，它不会干扰页面加载时间。
要保持优先级提示，可以将重要性参数设置为低，如下所示：
fetch('/wasm/bar.wasm', { importance: "low" });(警告:此答案发布后，浏览器支持有限)
https://stackoverflow.com/questions/69347794
复制相似问题
腾讯云开发者
