Cache.match(request)在service-worker中返回未定义的JSONP请求

时间:2018-12-20 20:22:08

标签: javascript caching frontend service-worker web-worker

在下面,您可以看到我第一次尝试创建服务工作者,并且此代码的​​问题是它永远不会返回缓存的响应,因为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)
    )
  }
})

2 个答案:

答案 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)来解决此问题。