Стратегия Workbox Stale-while-revalidate всегда возвращает ответ от сетевого вызова вместо кэша

Question

Я использую workbox-webpack-plugin, ниже приведен код в конфигурации webpack

new GenerateSW({
  runtimeCaching: [
    {
      urlPattern: new RegExp('^https://devapi\.mysite\.xyz/'),
      handler: 'staleWhileRevalidate',
      options: {
        cacheableResponse: {
            statuses: [200]
        }
      }
    }
  ]
})

Ниже приведен поток устаревших при повторной проверке стратегии в соответствии с Google Doc.

Я вызываю API из междоменной области, и я заметил, что каждый раз ответ возвращается на интерфейс не из кэша, а из ответа на сетевой вызов.

Я ожидаю, когда один и тот же API будет вызван во второй раз, я должен получить ответ из кэша, а затем кэш должен быть обновлен из ответа сетевого вызова.

Answer 1

Я думаю, что вся информация в этом руководстве " Обработка запросов третьих сторон" должна помочь.

В частности, убедитесь, что ваш удаленный сервер использует CORS, иначе вы получите response который имеет статус 0, Вы явно настраиваете cacheableResponse плагин для кэширования только ответов со статусом 200,

Answer 2

Для тех, кто наткнулся на это сейчас, правильный фрагмент должен быть.Workbox слушает StaleWhileRevalidateнет staleWhileRevalidate.

      new GenerateSW({
  runtimeCaching: [
    {
      urlPattern: new RegExp('^https://devapi\.mysite\.xyz/'),
      handler: 'StaleWhileRevalidate',
      options: {
        cacheableResponse: {
            statuses: [200]
        }
      }
    }
  ]
})