Angular中如何实现类似Slack的离线后手动重试重连网络功能

网页没有权限直接触发操作系统层面的网络重连操作，Slack等应用的「重试」功能本质是前端主动发起轻量请求检测网络是否已恢复，属于模拟重试效果。

实现逻辑 #

• 改造离线状态snackbar，新增「重试」操作按钮
• 编写网络检测方法：发起一个低开销的请求（推荐使用站点静态资源/后端健康检查接口），根据请求成功/失败判断当前网络状态
• 监听重试按钮点击事件，触发检测逻辑，检测通过则触发在线状态逻辑，否则继续保持离线提示

完整代码示例 #

前提：已在Angular对应模块中导入HttpClientModule，组件中注入了HttpClient。

下述代码中showSnackbar返回snackbar实例的逻辑基于Angular Material的MatSnackBar实现，如果你是自行封装的snackbar组件，自行适配按钮点击的回调监听即可。

import { fromEvent } from 'rxjs';
import { take, catchError, timeout } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

// 注入HttpClient
constructor(private http: HttpClient) {}

isOffline = false;

ngOnInit() {
  // 监听离线事件
  fromEvent(window, 'offline').subscribe(event => {
    this.isOffline = true;
    // 离线snackbar新增重试按钮
    const snackBarRef = this.showSnackbar('No Internet', null, '重试');
    // 监听snackbar操作点击
    snackBarRef.onAction().subscribe(() => {
      this.checkNetworkStatus();
    });
  });

  // 监听在线事件
  fromEvent(window, 'online').subscribe(event => {
    this.isOffline = false;
    this.showSnackbar('Internet Connected', 2000);
  });
}

// 网络状态检测方法
checkNetworkStatus() {
  // 用站点favicon作为检测资源，体积小无额外业务开销，也可替换为你的后端健康检查接口
  this.http.get('/favicon.ico', { responseType: 'blob' })
    .pipe(
      timeout(3000), // 3秒超时判定为失败
      take(1),
      catchError(() => {
        // 检测失败，继续显示离线提示
        this.showSnackbar('仍然无法连接网络，请检查网络设置', 2000);
        return [];
      })
    )
    .subscribe(() => {
      // 检测成功，说明网络已恢复
      if (this.isOffline) {
        this.isOffline = false;
        this.showSnackbar('Internet Connected', 2000);
      }
    })
}

注意事项 #

• 检测用的请求地址要选择跨域正常、返回稳定的资源，避免误判网络状态
• 可以根据需要调整超时时间，也可以添加防抖逻辑避免用户频繁点击重试
• 如果你的应用是纯离线PWA，也可以替换检测逻辑为请求任意业务需要的线上接口，确保业务接口可用

内容的提问来源于stack exchange，提问作者Thomas Allert