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

Question

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

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

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

Answer 1

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

也就是说，有一种方法可以检测传递给服务 worker 的 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.
  }
});

还有一些其他的possible values对于 event.request.mode，如 'cors'，但只有在对资源进行跨源请求时才会看到它们。