确定 fetchEvent 的来源

Question

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

我想知道请求是来自 <img> 还是 <script> 是否可能？

sw.js

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

Answer 1

您可以访问 Request object that triggered your fetch event handler via event.request。

您可以通过各种不同的方式戳 Request，其中一种方式可能足以回答您的问题，尽管您无法从 [=10] 中分辨出来=] object <img> 或 <script> 负责触发 fetch 事件。

您可以检查 event.request.type，根据 specification，它可能是空字符串，或者可能具有值 "audio"、"font"、"image"、"script"、"style"、"track" 或 "video".
您当然可以检查 event.request.url，并尝试从中推断它是对图像、脚本还是其他内容的请求。
您可以通过 event.request.headers.get('x-header-name') 查看请求的 headers 并检查其中任何可能对您有意义的内容。
您可以检查 event.request.mode，这将是 set to different values，具体取决于它是导航请求、same-origin 本地资源请求还是 cross-origin请求.

其中

None 会直接告诉您特定的 <img> 标记是否负责触发请求，但不清楚为什么知道这一点对于您的用例来说是特别必要的。（您的具体用例是什么？）

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

Determinate where fetchEvent came from