Javascript 如何使用serviceWorker缓存ajax响应

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

现在，我想使用ServiceWorker缓存这些ajax响应（图像文件数组）。在“网络”选项卡中，我可以看到它正在调用未缓存的url（类型：xhr）。到目前为止，我已经尝试获取url并缓存这些url，但无法做到这一点

这是我在index.html中的ajax调用

    <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>

---

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

您的

获取事件处理程序以

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

这意味着，只有当传入的
fetch
事件是针对某个用户时，才会执行其中的代码。只有在首次加载页面时对HTML文档的初始请求才是导航请求。您对其他子资源的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
  }
});

对此有什么建议吗？我可以看到从“网络”选项卡调用的请求，但无法在缓存中看到响应。谢谢您的大力帮助。我想将响应加载到页面中，初始加载意味着导航时间
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
  }
});