如何在断网的时候清除缓存的请求

在断网时清除缓存的请求需要使用 Service Worker 来实现。Service Worker 是运行在浏览器后台的脚本，可以拦截和处理网络请求，可以通过在 Service Worker 中监听 fetch 事件，实现断网时清除缓存请求的功能。

具体实现方法如下：

1. 注册 Service Worker：在页面中注册 Service Worker，Service Worker 可以拦截页面发起的网络请求，从而实现对请求的控制。

2. 监听 fetch 事件：在 Service Worker 中监听 fetch 事件，当页面发起请求时，Service Worker 会拦截请求并触发 fetch 事件。

3. 判断网络状态：在 fetch 事件中判断网络状态，如果网络断开则清空缓存的请求。

4. 更新缓存：在有网络的情况下，重新发起请求并更新缓存。

下面是一个简单的示例代码：

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

// 监听 fetch 事件
self.addEventListener('fetch', function(event) {
  // 判断网络状态
  if (!navigator.onLine) {
    // 清空缓存的请求
    event.respondWith(new Response('', {status: 408, statusText: '网络未连接'}));
  } else {
    // 更新缓存
    event.respondWith(fetch(event.request));
  }
});

在上面的示例代码中，我们在 Service Worker 中监听了 fetch 事件，并在事件处理中判断了网络状态。如果网络断开，则清空缓存的请求，否则重新发起请求并更新缓存。