在下面,您可以看到我第一次尝试创建服务工作者,并且此代码的问题是它永远不会返回缓存的响应,因为addUrlToCache函数中的cache.match(request)始终返回未定义。有谁知道为什么找不到缓存的请求?
import API from 'top-secret'
const PHOTOS_CACHE = 'photos-cache'
const OBJECTS_CACHE = 'objects-cache'
const urlCacheData = [
{
cacheKey: OBJECTS_CACHE,
url: API.apiUrlGetObjects
},
{
cacheKey: PHOTOS_CACHE,
url: API.apiUrlGetPhotos
}
]
function addUrlToCache (request, cacheKey) {
return caches
.open(cacheKey)
.then(cache => cache.match(request))
.then(cachedResponse => {
if (cachedResponse) {
return cachedResponse
}
return fetch(request).then(response => {
caches.open(cacheKey).then(cache => cache.put(request, response))
return response.clone()
})
})
}
function clearCache () {
return caches.keys().then(cacheNames => {
const promisesToDeleteCache = cacheNames.map(cacheName =>
caches.delete(cacheName)
)
return Promise.all(promisesToDeleteCache)
})
}
self.addEventListener('activate', event => {
event.waitUntil(clearCache())
})
self.addEventListener('fetch', event => {
const urlToCache = urlCacheData.find(item =>
event.request.url.includes(item.url)
)
if (urlToCache) {
event.respondWith(
addUrlToCache(event.request, urlToCache.cacheKey)
)
}
})
答案 0 :(得分:1)
在addUrltoCache函数中获取请求后,替换
fetch(request).then(response => {
caches.open(cacheKey).then(cache => cache.put(request, response))
return response.clone()
})
使用
return fetch(request).then(response => {
caches.open(cacheKey).then(cache => cache.put(request, response.clone()))
return response;
})
因为您应该先克隆然后返回响应。在代码中,您已经使用响应将值放入缓存中了。
答案 1 :(得分:0)
我刚刚发现问题是我的JSONP请求带有诸如bla-bla/api?callback=jsonp_randomNumber
之类的随机回调值,因此由于随机数的原因,每次发出请求时url都会不同,这就是为什么缓存.match检查无效。
我通过在使用的jsonp库的配置中硬编码回调值(在我的情况下为jsonp-fetch)来解决此问题。