как кэшировать ajax ответ с помощью serviceWorker - PullRequest
Новая
       3

как кэшировать ajax ответ с помощью serviceWorker

0 голосов
/ 13 апреля 2020

Я вызываю данные сервера, используя ajax в индексе. html. Он отлично выбирает эти данные. Сейчас я работаю с сервис-работником. Я могу кэшировать все ресурсы stati c (изображения, js, css) и проверять эти кэшированные активы в кэшированном хранилище на вкладке приложения в инструментах Chrome dev. Я могу видеть на вкладке Сеть также эти активы кэшируются (дисковый кеш).

Теперь я хочу кэшировать ответ ajax (массив файлов изображений) с помощью сервисного работника. На вкладке сети я вижу, что он вызывает URL (тип: xhr) без кэширования. До сих пор я пытался получить URL и кэшировать те, но не смог этого сделать.

Вот мой ajax звонок в индексе. html

    <script type="text/javascript">
       $(document).ready(function () {
          var url = 'index.cfm?action=main.appcache';
            $.ajax({
                type:"GET",
                url: url,
                data: function(data){
                var resData = JSON.stringify(data);
            },
            cache: true,
            complete: doSomething
            })
});

function doSomething(data) {
    console.log(data.responseText);
}
</script>

Вот мое событие извлечения serviceWorker: 

    self.addEventListener('fetch', (event) => {

  if (event.request.mode === 'navigate') {
    event.respondWith((async () => {
      try {
        const preloadResponse = await event.preloadResponse;
        if (preloadResponse) {
          return preloadResponse;
        }
        const normalizedUrl = new URL(event.request.url);
        if(normalizedUrl.endsWith === 'index.cfm?action=main.appcache'){
           const fetchResponseP = fetch(normalizedUrl);
           const fetchResponseCloneP = fetchResponseP.then(r => r.clone());
          event.waitUntil(async function() {
           const cache = await caches.open(precacheName);
           await cache.put(normalizedUrl, await fetchResponseCloneP);
            }());
          return (await caches.match(normalizedUrl)) || fetchResponseP;
        }
        const networkResponse = await fetch(event.request);
        return networkResponse;
      } catch (error) {
        console.log('Fetch failed; returning offline page instead.', error);

        const cache = await caches.open(precacheName);
        const cachedResponse = await cache.match(offlineDefaultPage);
        return cachedResponse;
      }
    })());
  }
});

Пожалуйста, помогите мне, какие изменения необходимы для кэширования ответа.

1 Ответ

0 голосов
/ 14 апреля 2020

Ваш обработчик событий fetch начинается с 

if (event.request.mode === 'navigate') {
  // ...
}

Это означает, что код внутри него будет выполняться только в том случае, если входящее событие fetch предназначено для запроса навигации . Только начальный запрос для документа HTML при первой загрузке страницы является запросом навигации. Ваши AJAX запросы на другие субресурсы не являются запросами навигации.

Если вы хотите кэшировать ваши запросы для index.cfm?action=main.appcache в дополнение к вашей логике c для запросов навигации, вы можете добавить еще один if заявление после первого и проверьте этот URL: 

self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    // ...
  }

  if (event.request.url.endsWith('index.cfm?action=main.appcache')) {
    // Your caching logic goes here. See:
    // https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook#serving-suggestions
  }
});
...