如何在 Service Worker fetch API 中检测 URL 请求是否为 ajax

Question

我正在开发一个渐进式网络应用程序。我想缓存一个页面的两个版本

1. 正常 - 整页，包括页眉和页脚
2. Ajax - 仅内容

在离线使用的情况下，我需要检测请求是针对普通版本还是Ajax版本，以便我可以返回正确的数据。

Answer 1

我建议按照评论中的建议，针对不同类型的请求使用不同的 URL。

话虽这么说，有一种方法可以检测传递给服务工作线程fetch处理程序的给定请求是用于完整导航（术语中的“正常”）还是由页面动态加载的资源（术语中的“Ajax”）。术语）。

self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    // This is a navigation request, so respond with a
    // complete HTML document.
  } else if (event.request.mode === 'same-origin') {
    // This is a same-origin request for a resource, so
    // respond appropriately depending on event.request.url, etc.
  }
});

还有一些其他可能的值event.request.mode，例如，'cors'但只有在发出跨域资源请求时您才会看到它们。