Angular 11部署Heroku后网络连接检测功能失效如何解决

• 浏览器原生网络状态API存在局限性：navigator.onLine以及online/offline事件只能判断设备是否接入局域网，无法验证公网连通性。本地测试时断开网络就等于直接断开局域网连接，所以判定准确；部署到公网后，常会出现设备连入了WiFi但WiFi本身无公网访问权限的场景，此时原生API仍会返回在线状态，导致你的检测逻辑不会触发，看起来就像功能失效。
• 当前createOnline$实现功能不完整：仅能被动监听浏览器抛出的网络状态变更事件，没有主动校验公网连通性的逻辑，且初始状态仅会在应用加载时判断一次，无法覆盖后续的公网连通性故障场景。
• Ionic UI更新未触发变更检测：如果生产环境打包时的ZoneJS配置存在问题，异步回调中调用AlertController的逻辑可能没有被Angular变更检测捕获，导致弹窗无法正常渲染。

1. 优化网络检测逻辑，增加主动心跳校验 #

不要完全依赖浏览器原生API，新增定时心跳逻辑，通过访问站点固定小资源的方式验证真实公网连通性，修改后的代码如下：

import { merge, interval, fromEvent, Observable, Observer } from 'rxjs';
import { map, switchMap, catchError } from 'rxjs/operators';
import { NgZone } from '@angular/core';

// 心跳检测间隔，单位毫秒，可根据需求调整
const HEARTBEAT_INTERVAL = 30000;
// 心跳检测用的资源路径，建议用站点的favicon或者专门的空响应健康检查接口
const HEARTBEAT_URL = '/favicon.ico';

connectionMsg: boolean;
// 构造函数注入NgZone
constructor(private alertController: AlertController, private ngZone: NgZone) {
  let alertOpen = false; // 新增弹窗锁，避免重复弹出提示
  this.createOnline$().subscribe(isOnline => {
    console.log(isOnline);
    this.connectionMsg = isOnline;
    console.log("Msg: " + this.connectionMsg);
    if (!isOnline && !alertOpen) {
      alertOpen = true;
      // 用NgZone包裹逻辑，确保UI变更能被Angular捕获
      this.ngZone.run(() => {
        this.reloadPage().finally(() => alertOpen = false);
      });
    }
  })
}

createOnline$() {
  // 新增心跳检测逻辑
  const heartbeat$ = interval(HEARTBEAT_INTERVAL).pipe(
    switchMap(() => fetch(HEARTBEAT_URL, { cache: 'no-store' }).then(res => res.ok).catch(() => false)),
    map(status => status)
  );
  return merge<boolean>(
    fromEvent(window, 'offline').pipe(map(() => false)),
    fromEvent(window, 'online').pipe(map(() => true)),
    new Observable((sub: Observer<boolean>) => {
      sub.next(navigator.onLine);
    }),
    heartbeat$
  );
}

async reloadPage() {
  const alert = await this.alertController.create({
    header: 'Connection Lost',
    message: 'Try to <strong>reload</strong> the page.',
    backdropDismiss: false,
    buttons: [
      {
        text: 'Reload',
        handler: () => {
          window.location.reload();
        }
      }
    ]
  });
  await alert.present();
}

2. 排查生产环境打包配置 #

检查angular.json中生产环境构建的配置项，确保没有去掉Ionic相关的样式、组件依赖，也没有开启过度的tree-shaking把AlertController的相关代码剔除。如果开启了Service Worker，也要检查Service Worker的缓存策略是否影响了心跳资源的请求。

内容的提问来源于stack exchange，提问作者John Paulo A. Geronimo