Fix the response stream of service worker

After service worker update (rebuild the site), the following error will occasionally appear:

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

This commit ensures that the response object has been cached before being returned.
This commit is contained in:
Cotes Chung 2021-04-13 13:18:43 +08:00
parent efd8d44b12
commit e84331b26a
1 changed files with 29 additions and 18 deletions

47
sw.js
View File

@ -36,28 +36,39 @@ self.addEventListener('install', e => {
);
});
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request).then(r => {
/* console.log(`[sw] method: ${e.request.method}, fetching: ${e.request.url}`); */
return r || fetch(e.request).then(response => {
const url = e.request.url;
if (e.request.method !== 'GET'
|| !verifyDomain(url)
|| isExcluded(url)) {
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
if (response) {
return response;
}
return caches.open(cacheName).then(cache => {
/* console.log('[sw] Caching new resource: ' + e.request.url); */
cache.put(e.request, response.clone());
return response;
});
return fetch(event.request)
.then(response => {
const url = event.request.url;
});
})
);
if (event.request.method !== 'GET' ||
!verifyDomain(url) ||
isExcluded(url)) {
return response;
}
/*
see: <https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests>
*/
let responseToCache = response.clone();
caches.open(cacheName)
.then(cache => {
/* console.log('[sw] Caching new resource: ' + event.request.url); */
cache.put(event.request, responseToCache);
});
return response;
});
})
);
});
self.addEventListener('activate', e => {