Cache.match (запрос) возвращает неопределенное значение в сервис-работнике для запросов JSONP

Question

Ниже вы можете увидеть мою первую попытку создания работника службы, и проблема с этим кодом заключается в том, что он никогда не возвращает кэшированный ответ, поскольку cache.match (запрос) в функции addUrlToCache всегда возвращает неопределенное значение.У кого-нибудь есть идеи, почему он не находит кэшированные запросы?

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

Я только что выяснил, что проблема была в том, что у меня были запросы JSONP со случайными значениями обратного вызова, такими как bla-bla/api?callback=jsonp_randomNumber, поэтому URL будет отличаться каждый раз, когда я делаю запрос из-за случайного числа, поэтому cache.matchпроверка не сработает.

Я исправил это путем жесткого кодирования значения обратного вызова в конфигурации библиотеки jsonp, которую я использовал (jsonp-fetch в моем случае).

Answer 2

После получения запроса в функции 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;
  })

, поскольку сначала необходимо клонировать, а затем вернуть ответ. В своем коде вы уже использовалиВаш ответ для помещения значения в кеш.