javascript拦截来自web worker + file urls的http fetch

Question

我想拦截我的应用程序中所有部分和库的提取,同时我不想破坏通过文件URL处理应用程序的可能性 - 它对电子和移动设备(通过WebView)很有用.现在,我发现了两种可行的方法:

1. 像这里的东西

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

2. 像这里的东西,服务工作者注册:

main.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
  );
});

使用第一种方法,我无法拦截来自Web工作者的获取请求.第二种方法不适用于文件URL,我希望我的应用程序通过文件URL工作,因为它允许我通过Electron用于桌面或WebView for Android使用应用程序.有没有其他方法来拦截获取请求？

PS我无法修改我试图拦截请求的工人.

更新:根据@Ciro Corvino的回答,我尝试了第三种方法:在任何其他方面之前启动我自己的工作人员并尝试从那里重新定义提取.不幸的是,这对我不起作用,这里是代码:

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: 显然每个工作人员都拥有自己的私有WorkerGlobalScope,否则就没有意义将消息用于工人间通信.可能,我的问题的另一个修复可能是覆盖Worker构造函数,如果可能的话.会检查一下.

Answer 1

只需尝试将当前的 fetch 方法重写WorkerGlobalScope到主 javascript 上下文 ( window) 以及在调用此函数的专用工作线程上下文中运行的每个 js 文件中：

请注意，该self属性返回每个上下文的专门范围

 //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)
   }
 }

请参阅参考资料和浏览器兼容性：WorkerGlobalScope