javascript - 确定 fetchEvent 的来源

Question

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

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

sw.js

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

Answer 1

您可以访问 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 里面。