service worker缓存破坏谷歌地图api

Question

我有麻烦让我的渐进式web应用程序工作。我需要防止它缓存谷歌地图api。我已经试过了，所以它不会缓存域外的任何东西，但似乎不能弄清楚。

cacheId = cacheIdRelace;
staticCache = "static-" + cacheId;
dynamicCache = "dynamic-" + cacheId;
self.addEventListener('install', function(event) {
console.log('[Service Worker] Installing Service Worker ...', event);
self.skipWaiting();
event.waitUntil(
caches.open(staticCache).then(function(cache) {
cache.addAll(['/', '/index.html','offline/index.html', '/manifest.json', '/style/main.css']);
})
);
});
self.addEventListener('activate', evt => {
console.log('[Service Worker] Activating Service Worker ....');
evt.waitUntil(
caches.keys().then (keys =>{
//console.log(keys);
return Promise.all(keys
.filter(key => key !== staticCache && key !== dynamicCache)
.map(key => caches.delete(key))
)
})
)
});
self.addEventListener('fetch', evt => {
evt.respondWith(
caches.match(evt.request).then(cacheRes => {
return cacheRes || fetch(evt.request).then(fetchRes => {
return caches.open(dynamicCache).then(cache => {
if ((evt.request.url).includes(window.location.host)) {
cache.put(evt.request.url, fetchRes.clone());
}
fetchRes.clone()
return fetchRes
})
});
}).catch(() => caches.match('/offline/'))
);
});

我添加了以下语句，试图防止缓存本地域以外的任何内容，但我做错了一些事情，它只是抛出fetch错误。

if ((evt.request.url).includes(window.location.host)) {

Answer 1

您应该检查url并从服务器获取，如果它是google api:

self.addEventListener('fetch', function (event) {
// no caching google api
if (event.request.url.indexOf('maps.googleapis.com/maps/api/') > -1) {
event.respondWith(
fetch(event.request).then(
function (response) {
// Check if we received a valid response
if (!response) {
console.error("fetch eventhandler error: no response");
return Response.error();
}
if (!response.ok) {
console.warn("fetch eventhandler warning: status=", response.status, response.type);
return response;
}
// ok
return response;
}).catch(function () {
// failed access
console.error("fetch eventhandler error");
return Response.error();
}))
} else {
event.respondWith(
caches.match(event.request).then(cacheRes => {
return cacheRes || fetch(event.request).then(fetchRes => {
return caches.open(dynamicCache).then(cache => {
if ((event.request.url).includes(window.location.host)) {
cache.put(event.request.url, fetchRes.clone());
}
fetchRes.clone()
return fetchRes
})
});
}).catch(() => caches.match('/offline/'))
);
}
});

Answer 2

@nechoj代码sniped工作完美。只是稍微修改一下，只缓存同一域中的资源。

self.addEventListener('fetch', function (event) {
// no caching google api
if (!(event.request.url.indexOf(self.location.host) > -1)) {
event.respondWith(
fetch(event.request).then(
function (response) {
// Check if we received a valid response
if (!response) {
console.error("fetch eventhandler error: no response");
return Response.error();
}
if (!response.ok) {
console.warn("fetch eventhandler warning: status=", response.status, response.type);
return response;
}
// ok
return response;
}).catch(function () {
// failed access
console.error("fetch eventhandler error");
return Response.error();
}))
} else {
event.respondWith(
caches.match(event.request).then(cacheRes => {
return cacheRes || fetch(event.request).then(fetchRes => {
return caches.open(dynamicCache).then(cache => {
cache.put(event.request.url, fetchRes.clone());
return fetchRes
})
});
}).catch(() => caches.match('/offline/'))
);
}
});