如何在service worker fetch API中检测URL请求是否为ajax

Question

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

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

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

Answer 1

我建议对不同类型的请求使用不同的url，正如评论中建议的那样。

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

event.request.mode还有其他一些可能的值，比如'cors'，但是你只会在对资源进行跨域请求时看到它们