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

【问题标题】：Can JavaScript or ServiceWorkers detect network activity / Ajax events?JavaScript 或 ServiceWorkers 可以检测网络活动/Ajax 事件吗？
【发布时间】：2016-06-09 06:40:00
【问题描述】：

有没有办法让ServiceWorker（或其他机制）检测资源何时被下载？

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

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

缺少hacking open the XMLHttpRequest.prototype methods，JavaScript 是否提供监听网络活动的方法？

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

【问题讨论】：

标签： javascript ajax httprequest

【解决方案1】：

是的，Service Worker 会捕获您列出的所有获取事件。注册一个服务工作者：

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

在您的服务工作者脚本中，为fetch 事件安装处理程序：

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

这是一个证明这一点的plunker。您需要从 Live Preview 中运行两次演示（一次用于注册 service worker，再次用于在控制台中查看 fetch 事件）。不要忘记从 DevTools 中注销 Service Worker 作为清理：DevTools > Resources/Applications > Service Worker（左侧面板）> Delete（右侧）。

【讨论】：

【解决方案2】：

是的，这就是 ServiceWorker 的全部意义所在。

ServiceWorker 的限制（根据规范）：您将无法拦截对 <object> 或 <embed> 资源的请求，也无法拦截导航请求。这两种限制都是为了安全措施而设计的。

我建议您从 ServiceWorker 规范的 Handle Fetch 部分开始阅读。

【讨论】：