2

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

2 回答 2

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

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

于 2018-12-21T10:48:19.777 回答
0

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

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

于 2018-12-21T14:08:00.720 回答