JavaScript或ServiceWorkers可以检测网络活动/ Ajax事件吗？

Question

有没有办法ServiceWorker(或其他机制)检测何时下载资源？

例如,如果发生以下任何情况,我希望收到通知:

• <img src> 下载
• background-image: url(...)下载中的资源
• 样式表遇到了@import并且正在获取资源
• <script src> 下载
• 一些脚本调用一个新的XMLHTTPRequest或fetch

短的黑客开放的XMLHttpRequest.prototype方法,它的JavaScript提供了一种方法来听网络活动？

这与关于空闲网络活动的问题相反

Answer 1

是的,服务工作者会捕获您列出的所有获取事件.注册服务人员:

navigator.serviceWorker.register('/service-worker.js');

在服务工作者脚本中,为fetch事件安装处理程序:

// `self` is a ServiceWorkerGlobalScope
self.addEventListener('fetch', function(event) {
  console.log("fetch event:", event.request.url);
});

这是一个演示这个的plunker.您需要从实时预览中运行两次演示(一次注册服务工作者,再次查看控制台中的获取事件).不要忘记从DevTools注销服务工作者作为清理:DevTools> Resources/Applications> Service Workers(左侧面板)> Delete(右).