Javascript 在FIrefox中使用Web worker进行图像缓存

又是我提出了一个相当具体的问题。我正在尝试使用webworker来缓存大量图像，我将在外部加载的AngularJS应用程序中使用THREE.js场景。由于Firefox最出色的WebVR实现，我不得不每晚使用Firefox（59）

对于我将要展示的THREE.js 3D场景，我必须预加载许多全景图像块。在第一个页面加载时，我希望为所有相邻的全景（大小从1kb到200kb）缓存大约400万（30000个可能的全景球体*每个球体32个平铺*4个分辨率）图像的上限（持久，客户端）。对于那些数量的

THREE.js（我绑定到r74）将图像缓存在临时对象（Image/Fileloader.Cache）中，但它们在浏览器刷新时丢失。此外，我无法控制加载程序的逻辑，因为AngularJS/THREE应用程序是从外部公司加载的。我只想缓存一次图像，并将其保持缓存状态，直到手动删除缓存。因此，对Textureloader和Imageloader的每次调用都应该创建缓存命中这就是为什么我必须在浏览器/HTTP级别解决这个问题，而不是应用程序逻辑。

所以基本上我是这样做的：

AngularJS服务中的一些适当位置：

if($window.Worker){
  var urls = [...] // array with url strings
  this.cacheWorker = new Worker('scripts/workers/cacheWorker.js');
  this.cacheWorker.onmessage = this.onCacheWorkerMessage;

  this.cacheWorker.postMessage(urls)
}

cacheWorker.js：

onmessage = function(e) {
  var cacheName = 'default_cache'         
  var urls = e.data.urls;

  if('caches' in self){
    caches.open(this.cacheName).then((cache) => {

    for (let u = 0; u < urls.length; u++) {
      var url = urls[u];
      const request = new Request(url, { mode: 'no-cors' }); // cross-origin hack
      fetch(request).then(response => {
        cache.put(request, response);
      });        
    }
  }
}

onmessage=function（e）{
var cacheName='default\u cache'
var url=e.data.url；
如果（'caches'在self中）{
caches.open（this.cacheName）。然后（（cache）=>{
for（设u=0；u{
cache.put（请求、响应）；
});        
}
}
}

---

看起来不错，应该有用，发生了什么事？

在缓存图像后，尝试使用ImageLoader加载完全相同的图像在Firefox中不会给我缓存命中，在Chrome中，它会命中

查看请求头，两者的来源都是相同的字符串。相同的端口、相同的域、相同的协议…引用者是我的工作脚本的路径是否有问题？

可能缓存太小？首先，在about:config中，我更改了以下内容：

• browser.cache.disk.max\u条目大小：-1
• browser.cache.memory.max\u条目大小：-1
• browser.cache.disk.capacity： 我无法更改此值，它总是被还原为358400？。我没有用户prefs文件，所以您理解为什么只有此值被还原
• browser.cache.offline.capacity:10000000

也许服务人员可以提供更好的解决方案？

请帮帮我，我需要一些意见