来自S3的图像未与Service Worker一起使用(Images from S3 not working with Service Worker)

来自S3的图像未与Service Worker一起使用(Images from S3 not working with Service Worker)

我正在将我们的一个网站变成PWA。 它有很多来自S3的图像因以下控制台警告而失败：

The FetchEvent for "[image url]" resulted in a network error response: an object that was not a Response was passed to respondWith().

这是SW代码：

self.addEventListener('fetch', event => { function onFetch (event) { // Determine type of asset var request = event.request, acceptHeader = request.headers.get('Accept'), resourceType = 'static'; if(acceptHeader.indexOf('text/html') !== -1) { resourceType = 'content'; } else if(acceptHeader.indexOf('image') !== -1) { resourceType = 'image'; } // Network first for HTML and images if(resourceType === 'content' || resourceType === 'image') { event.respondWith(fetch(request) .then(response => addToCache(request, response)) // read through caching .catch(() => fetchFromCache(event)) .catch(() => offlineResponse(resourceType)) ) } } onFetch(event); }); function addToCache(request, response) { if(response.ok) { // only 200s var copy = response.clone(); // Because responses can only be used once caches.open(cacheName) .then(cache => { cache.put(request, copy); }); return response; } } function fetchFromCache (event) { return caches.match(event.request) .then(response => { if(!response) { // A synchronous error that will kick off the catch handler throw Error('${event.request.url} not found in cache'); } return response; }); }

这只发生在S3的图像中，其他所有图像都按预期工作。 有谁知道发生了什么事？

I am in the process of turning one of our websites into a PWA. It has a lot of images from S3 that fail with the following console warning:

The FetchEvent for "[image url]" resulted in a network error response: an object that was not a Response was passed to respondWith().

Here's the SW code:

self.addEventListener('fetch', event => { function onFetch (event) { // Determine type of asset var request = event.request, acceptHeader = request.headers.get('Accept'), resourceType = 'static'; if(acceptHeader.indexOf('text/html') !== -1) { resourceType = 'content'; } else if(acceptHeader.indexOf('image') !== -1) { resourceType = 'image'; } // Network first for HTML and images if(resourceType === 'content' || resourceType === 'image') { event.respondWith(fetch(request) .then(response => addToCache(request, response)) // read through caching .catch(() => fetchFromCache(event)) .catch(() => offlineResponse(resourceType)) ) } } onFetch(event); }); function addToCache(request, response) { if(response.ok) { // only 200s var copy = response.clone(); // Because responses can only be used once caches.open(cacheName) .then(cache => { cache.put(request, copy); }); return response; } } function fetchFromCache (event) { return caches.match(event.request) .then(response => { if(!response) { // A synchronous error that will kick off the catch handler throw Error('${event.request.url} not found in cache'); } return response; }); }

This only happens with images from S3, all others work as expected. Anyone know what's going on?

最满意答案

我的猜测是来自S3的图像响应是不透明的。 （请参阅： 不透明响应有哪些限制？ ）

如果在S3中启用CORS ， 并将crossorigin属性添加到<img>标记 ，那么您的响应应该都是启用CORS的。

或者，您可以通过不在addToCache()函数中检查response.ok的值来response.ok您获得不透明响应的事实 - 对于不透明响应，它总是为false。 这意味着您最终可能会向缓存添加4xx或5xx错误响应而不是有效的图像响应，但这是在缓存不透明响应时运行的风险。

My guess is that your image responses from S3 are opaque. (See: What limitations apply to opaque responses?)

If you enable CORS in S3, and add the crossorigin attribute to your <img> tags, then your responses should all be CORS-enabled.

Alternatively, you can work around the fact that you're getting opaque responses by not checking the value of response.ok in your addToCache() function—it'll always be false for opaque responses. This means that you might end up adding a 4xx or 5xx error response to the cache instead of a valid image response, but that's the risk you run when caching opaque responses.