Blazor应用无网络连接场景如何处理并给用户展示提示信息？

通用全局网络状态监听 #

Blazor本身未内置网络状态检测能力，可结合浏览器原生navigator.onLineAPI + JS互操作实现全局提示：

1. 在对应入口文件引入JS逻辑
   • Blazor WASM 写入wwwroot/index.html的<body>末尾
   • Blazor Server 写入Pages/_Layout.cshtml的<body>末尾

   window.networkStatus = {
       // 获取当前网络状态
       getIsOnline: () => navigator.onLine,
       // 注册网络状态变更回调
       registerChangeCallback: (dotNetRef) => {
           window.addEventListener('online', () => dotNetRef.invokeMethodAsync('OnNetworkChange', true));
           window.addEventListener('offline', () => dotNetRef.invokeMethodAsync('OnNetworkChange', false));
       }
   }
   

2. 封装全局断网提示组件Shared/NetworkAlert.razor

   @implements IAsyncDisposable
   @inject IJSRuntime JSRuntime
   @* 固定在页面顶部高优先级显示 *@
   @if (!_isOnline)
   {
       <div class="fixed-top bg-danger text-white text-center p-2" style="z-index: 99999">
           无网络连接，请检查网络后重试
       </div>
   }
   @code {
       private bool _isOnline = true;
       private DotNetObjectReference<NetworkAlert>? _dotNetRef;
   
       protected override async Task OnAfterRenderAsync(bool firstRender)
       {
           if (firstRender)
           {
               _dotNetRef = DotNetObjectReference.Create(this);
               // 初始化获取网络状态
               _isOnline = await JSRuntime.InvokeAsync<bool>("networkStatus.getIsOnline");
               // 注册状态变更监听
               await JSRuntime.InvokeVoidAsync("networkStatus.registerChangeCallback", _dotNetRef);
               StateHasChanged();
           }
       }
   
       [JSInvokable]
       public void OnNetworkChange(bool isOnline)
       {
           _isOnline = isOnline;
           StateHasChanged();
       }
   
       // 页面销毁时释放监听资源
       public async ValueTask DisposeAsync()
       {
           if (_dotNetRef != null)
           {
               _dotNetRef.Dispose();
           }
       }
   }
   

3. 将该组件放在App.razor最顶部，即可实现全页面断网自动提示。

交互场景额外补全校验 #

navigator.onLine仅能判断设备是否连接到网络，无法判断是否能正常连通你的应用服务器，需要补充两类场景的校验逻辑：

• 所有提交、保存、查询等和服务端交互的操作前，先发起一次轻量心跳请求（例如访问一个空的健康检查接口），请求失败直接拦截后续操作，触发网络异常提示
• 针对Blazor Server的Circuit连接断开场景，重写默认重连逻辑，在blazor.server.js引入位置添加以下配置：

  <script src="_framework/blazor.server.js" autostart="false"></script>
  <script>
  Blazor.start().then(() => {
      Blazor.defaultReconnectionHandler.onConnectionDown = () => {
          // 直接操作DOM显示断网提示即可
          document.querySelector('.network-alert')?.classList.remove('d-none');
      };
  });
  </script>
  

路由跳转拦截 #

要解决离线时地址栏修改地址无响应的问题，在App.razor的Router组件上添加Navigating事件拦截：

<Router AppAssembly="@typeof(App).Assembly" Navigating="OnNavigating">
    <!-- 原有Router的Found、NotFound等配置保持不变 -->
</Router>
@inject NavigationManager NavManager
@inject IJSRuntime JSRuntime
@code {
    private async Task OnNavigating(NavigationContext context)
    {
        bool isOnline = await JSRuntime.InvokeAsync<bool>("networkStatus.getIsOnline");
        if (!isOnline)
        {
            // 阻止跳转，停留在当前页面
            NavManager.NavigateTo(NavManager.Uri, forceLoad: false);
            // 触发断网提示逻辑
        }
    }
}

内容的提问来源于stack exchange，提问作者Krzysztof Krysztofczyk