PreloadJS 和 Service Worker

Question

我正在尝试将 Service Worker 与 PreloadJS 结合使用。我已经缓存了所需的图像，然后使用 caches.match() 函数加载它们。

当我尝试使用 jquery 加载图像时，它工作正常，但使用 preloadJS 加载时，出现以下错误

The FetchEvent for "someurl" resulted in a network error response: an "opaque" response was used for a request whose type is not no-cors

虽然如果我加载任何其他未缓存的图像，PreloadJS 会正确加载该图像。只有当我使用 caches.match.

时才会出现问题

这可能是什么原因？

使用preloadjs加载图片

var preload = new createjs.LoadQueue({ crossOrigin: "Anonymous" });

function loadImageUsingPreload() {

  preload.on('complete', completed);

  preload.loadFile({ id: 'someid', src: 'someurl', crossOrigin: true })

};

function completed() {
  var image = preload.getResult("shd");
  document.body.append(image);
};

使用jquery

加载图片

function loadImageUsingJquery() {
  jQuery("#image").attr('src', 'someurl');
};

Service Worker 获取事件

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {

      if (!response) {
        console.log('fetching...' + event.request.url);
        return fetch(event.request);
      };
      console.log("response", response);
      return response;
    }));
});

使用PreloadJS或jQuery加载时的响应对象：

Response {type: "opaque", url: "", redirected: false, status: 0, ok: false, …}

Answer 1

发现错误，

实际上，在 cache.put 期间，如果来源不同，我将请求对象的模式修改为 'no-cors'。

现在在获取事件期间，事件的请求对象具有属性 'cors'，因为它是一个跨域请求。

mode 的这种差异导致了提取错误。

Service Worker 安装事件：

var request = new Request(value);
var url = new URL(request.url);

if (url.origin != location.origin) {
    request = new Request(value, { mode: 'no-cors' });
}

return fetch(request).then(function(response) {
    var cachedCopy = response.clone();
    return cache.put(request, cachedCopy);
});

我改成：

var request = new Request(value);
var url = new URL(request.url);

return fetch(request).then(function(response) {
    var cachedCopy = response.clone();
    return cache.put(request, cachedCopy);
});

我必须使用第一种方法来保存 cdn，因为第二种方法对它们不起作用，反之亦然对我托管在 cloudfront 上的图像。

我会 post 找到发生这种情况的原因。

PreloadJS 和 Service Worker

PreloadJS and Service Worker

service-worker

preloadjs

cacheapi