Cache.match(请求) returns 未在 JSONP 请求的服务工作者中定义

Question

下面你可以看到我第一次尝试创建一个服务工作者，这段代码的问题是它从来没有 returns 缓存响应，因为 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)
    )
  }
})

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

因为您应该先克隆然后 return 您的代码 response.In 您已经使用您的响应将值放入缓存。

Answer 2

我刚刚发现问题是我的 JSONP 请求带有随机回调值，例如 bla-bla/api?callback=jsonp_randomNumber，因此每次发出请求时 url 都会不同，因为随机数字的事情，这就是为什么 cache.match 检查不起作用的原因。

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

Cache.match(请求) returns 未在 JSONP 请求的服务工作者中定义

Cache.match(request) returns undefined in service-worker for JSONP requests

javascript

frontend

caching

web-worker

service-worker