javascript - JavaScript 或 ServiceWorkers 可以检测网络事件/Ajax 事件吗？

Question

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

例如，如果发生以下任一情况，我希望得到通知:

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

缺少hacking open the XMLHttpRequest.prototype methods , JavaScript 是否提供了一种监听网络事件的方法？

它与 this question about idle network activity 有点相反

Answer 1

是的，Service Worker 会捕获您列出的所有提取事件。注册服务 worker :

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

在您的服务 worker 脚本中，为 fetch 事件安装处理程序:

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

这是一个 plunker这证明了这一点。您需要从实时预览中运行演示两次(一次用于注册服务 worker ，另一次用于在控制台中查看获取事件)。不要忘记从 DevTools 中注销 service worker 作为清理:DevTools > Resources/Applications > Service Workers(左面板)> Delete(右面板)。