javascript 拦截来自 web worker + 文件 url 的 http 获取

Question

我想拦截我应用程序中所有部分和库的获取，同时我不想破坏通过文件 URL 使用应用程序的可能性 - 它对 Electron 和移动设备很有用(通过 WebView)。目前，我发现了两种可能的方法:

1. 类似于 here

   const realFetch = window.fetch;
   window.fetch = function() {
   // do something
   return realFetch.apply(this, arguments)
   }
   

2. 类似于 here ，服务 worker 注册:

主要.js:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
  navigator.serviceWorker.register('sw.js').then(function(registration) {
    console.log('Service worker registered with scope: ', registration.scope);
  }, function(err) {
  console.log('ServiceWorker registration failed: ', err);
});
});
}

sw.js:

self.addEventListener('fetch', function(event) {
  event.respondWith(
  // intercept requests by handling event.request here
  );
});

使用第一种方法我无法拦截来自网络 worker 的获取请求。第二种方法不适用于文件 URL，我希望我的应用程序通过文件 URL 工作，因为它允许我通过用于桌面的 Electron 或用于 Android 的 WebView 使用该应用程序。有没有其他方法可以拦截获取请求？

附言我无法修改我试图拦截请求的工作人员。

更新:根据@Ciro Corvino 的回答，我尝试了第三种方法:先启动我自己的 worker，然后尝试从那里重新定义 fetch。不幸的是，这对我不起作用，这是代码:

function redefineFetch() {
console.log('inside worker');
if (self.fetch == null) {
    console.log('null!');
} else {
    console.log(self.fetch.toString());
}
const originalFetch: WindowOrWorkerGlobalScope['fetch'] = self.fetch;
self.fetch = (input: RequestInfo, init: RequestInit) => {
    console.log('overridden');
    return originalFetch(input, init);
}
}
const blob = new Blob(['(' +
redefineFetch.toString() + ')()'], {type: 'text/javascript'});

const blobUrl = window.URL.createObjectURL(blob);
const w = new Worker(blobUrl);

我确定此代码在其他工作人员之前开始(我添加了超时)，但这并没有为其他工作人员重新定义提取。有人可以解释原因或修复解决方案吗？

更新 2:显然每个 worker 都有自己的私有(private) WorkerGlobalScope，否则使用消息进行 worker 间通信是没有意义的。如果可能的话，我的问题的另一个解决方法可能是覆盖 Worker 构造函数。会检查的。

Answer 1

只需尝试将当前 WorkerGlobalScope 的 fetch 方法覆盖到主 javascript 上下文(window)中，并在调用此函数的专用工作上下文中运行的每个 js 文件中:

note that the self property returns the specialized scope for each context

 //works in each worker context you call it and enable fetch interception
 function EnableFetchWithArguments() {
   const originalCtxFetch = self.fetch;
   self.fetch = function() {
     // Get the parameter in arguments
     // Intercept the parameter here 
     return originalCtxFetch.apply(this, arguments)
   }
 }

see for reference and browser compatiblity: WorkerGlobalScope