如何获取Service Worker的fetch事件所处理页面的完整URL？

嘿，这个问题我之前也碰到过，给你梳理清楚细节：

• Service Worker的self.location确实始终指向注册它的站点根URL，不管它拦截的是哪个子路径下页面发起的请求。就像你提到的例子，哪怕是https://example.com/folder/pagename.html发起的fetch请求被拦截，self.location返回的还是https://example.com——这是Service Worker的设计特性，它是在整个站点全局范围内注册生效的，上下文绑定的就是注册时的根路径，和触发请求的具体页面无关。

• 至于你尝试的event.currentTarget.location、event.explicitOriginalTarget.location、event.originalTarget以及event.target这些属性，确实都没法实现获取发起请求页面路径的预期：

  • 这些属性大多属于DOM事件的范畴，但Service Worker处理fetch事件时，事件对象本身并不携带发起请求的页面的location信息；
  • 如果需要相关的来源信息，你可以试试event.request.referrer（能获取发起请求的页面URL）或者event.request.url（拿到当前被拦截的请求的目标URL），但这两者和页面自身的location属性还是有区别的。

要是你明确需要获取发起fetch请求的页面的具体路径，目前没有直接通过事件属性获取的方式，比较可行的方案是：在页面发起请求时自定义一个请求头，把页面的location.href信息携带进去，然后在Service Worker中读取这个自定义请求头来拿到对应内容。

内容的提问来源于stack exchange，提问作者Ryan Griggs