Cache.match（请求）返回服务工作者为JSONP请求未定义

Question

下面您可以在创建服务工作者以及与此代码的问题看我的第一次尝试，它永远不会返回addUrlToCache功能，因为cache.match（请求）的缓存响应总是返回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;
  })

因为你要克隆，然后再返回response.In你的代码已经使用你的回应把值在缓存中。

Answer 2

我刚刚想通了，问题是，我有喜欢bla-bla/api?callback=jsonp_randomNumber随机回调值JSONP请求，所以URL会有所不同，每次我做的，因为随机数的东西的要求，这就是为什么cache.match检查是行不通的。

我在我使用的（在我的情况JSONP取）的JSONP库的配置硬编码回调值固定它。