如何使用serviceWorker缓存ajax响应

Question

我调用服务器数据通过使用ajax在index.html.它是完美的获取这些数据。现在，我正在和服务人员一起工作。我可以缓存所有的静态资产（图像，js，css），并在Chrome开发工具的应用程序选项卡中的缓存存储中检查这些缓存的资产。我可以在网络选项卡中看到这些资产也被缓存（磁盘缓存）。

现在，我想使用ServiceWorker缓存这些ajax响应（图像文件数组）。在“网络”选项卡中，我可以看到它正在调用未缓存的url（类型：xhr）。到目前为止，我已经尝试获取url并缓存这些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;
      }
    })());
  }
});

请帮助我缓存响应需要哪些更改。

Answer 1

您的fetch事件处理程序以

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

这意味着只有当传入的getch事件是针对导航请求时，它内部的代码才会执行。只有首次加载页面时对超文本标记语言文档的初始请求才是导航请求。对其他子资源的AJAX请求不是导航请求。

如果除了导航请求的逻辑之外，还想缓存对index.cfm?action=main.appcache的请求，可以在第一个语句之后添加另一个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
  }
});