PreloadJS 和 Service Worker
PreloadJS and Service Worker
我正在尝试将 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, …}
发现错误,
实际上,在 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 找到发生这种情况的原因。
我正在尝试将 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, …}
发现错误,
实际上,在 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 找到发生这种情况的原因。