Cache.match(request)在JSONP请求的服务工作者中返回未定义的值

Question

下面你可以看到我第一次尝试创建服务工作者，这个代码的问题是它从不返回缓存响应，因为addUrlToCache函数中的cache.match(request)总是返回undefined。有人知道为什么它找不到缓存请求吗？

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)
)
}
})

Answer 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;
})

因为您应该先克隆，然后返回响应。在您的代码中，您已经使用响应将值放入缓存。

Answer 2

我刚刚发现问题是我有带有随机回调值(如bla-bla/api?callback=jsonp_randomNumber)的JSONP请求，所以由于随机数的原因，每次请求的url都会不同，这就是cache.match检查不起作用的原因。

我通过在我使用的jsonp库的配置中硬编码回调值(在我的例子中是jsonp-fetch)来修复它。