javascript - 确定 fetchEvent 的来源

标签 javascript service-worker

我正在使用 service worker 并监听正在发出的任何网络请求...

我想知道请求是否来自<img><script>这有可能吗?

sw.js

self.onfetch = event => {
    console.log(event)
}

最佳答案

您可以访问 Request object触发了你的 fetch event处理程序通过 event.request .

可以戳Request以各种不同的方式,其中一种可能足以回答您的问题,尽管您无法从 Request 中分辨出来。对象到底是哪个<img><script>负责触发fetch事件。

  • 你可以查看event.request.type , 根据specification ,可能是空字符串,或者可能具有值“audio”、“font”、“image”、“script”、“style”、“track”或“video”。

  • 你当然可以检查event.request.url ,并尝试从中推断它是对图像、脚本还是其他内容的请求。

  • 您可以通过 event.request.headers.get('x-header-name') 查看请求的 header 并检查其中任何可能对您有意义的内容。

  • 你可以查看event.request.mode ,这将是 set to different values取决于它是导航请求、同源本地资源请求还是跨源请求。

这些都不会直接告诉您特定的 <img>标签负责触发请求,但不清楚为什么知道这对您的用例来说是特别必要的。 (您的用例到底是什么?)

如果您确实需要了解有关受控页面上的哪些元素发出了哪些请求的更多信息,那么在填充 src 时可能包括一个额外的 URL 查询参数。 attributes 是合适的,然后您可以通过 event.request.url 检查这些参数在你的 service worker 里面。

关于javascript - 确定 fetchEvent 的来源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41666491/

相关文章:

Angular PWA : no matching service worker detected

javascript - 如何从具有 chrome 扩展名的事件选项卡中获取段落?

javascript - 如何在打开另一个 Accordion 时自动关闭 Accordion ?

javascript - 带有非数字/非日期 x 轴的 Dygraph

google-chrome - 如何防止 Service Worker 安装在浏览器(chrome)中?

javascript - 在 Safari 上更新 ServiceWorker 而无需重新加载页面

javascript - 在 create-react-app 项目中注销 service worker 的后果是什么?

javascript - 在 UIWebView 中捕获 console.log

javascript - React Native 重置状态的某些属性

javascript - 如何在 Service Worker 中编辑请求 url?