Images from S3 not working with Service Worker
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?