如何阻止Chrome挂起我的Blazor WASM应用标签页？

1. Web Workers 实现无节流的定时任务 #

Chrome会对非活跃标签的主线程定时器（如setTimeout/setInterval）进行节流（最低间隔被限制到1秒甚至更久），但Web Workers的定时器不受标签活跃状态影响——因为Worker运行在独立线程，不受主线程的节流机制约束，这是当前最可靠的实时上报方案。

在Blazor WASM中可以这样实现：

• 创建独立的Web Worker脚本（比如activityReporter.js），在Worker内部用setInterval维持30秒的上报周期。
• 通过Blazor的JS互操作，向Worker传递用户活动所需的关键数据（如会话ID、认证令牌）。
• 注意：Worker无法直接调用Blazor的.NET方法，上报结果可通过postMessage传递回主线程处理。

示例Worker代码（activityReporter.js）：

let intervalId;
let apiConfig = {};

self.onmessage = function(e) {
  switch(e.data.type) {
    case 'init':
      apiConfig = e.data.config;
      intervalId = setInterval(() => {
        fetch(apiConfig.endpoint, {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${apiConfig.token}`,
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ timestamp: Date.now() })
        }).catch(err => console.error('上报失败:', err));
      }, 30000);
      break;
    case 'stop':
      clearInterval(intervalId);
      break;
  }
};

Blazor组件中初始化Worker的C#代码：

private IJSObjectReference? _activityWorker;

protected override async Task OnInitializedAsync()
{
    _activityWorker = await JS.InvokeAsync<IJSObjectReference>("new Worker", "./activityReporter.js");
    await _activityWorker.InvokeVoidAsync("postMessage", new 
    {
        type = "init",
        config = new 
        {
            endpoint = "/api/user-activity",
            token = await GetCurrentAuthToken()
        }
    });
}

public void Dispose()
{
    _activityWorker?.InvokeVoidAsync("postMessage", new { type = "stop" });
    _activityWorker?.DisposeAsync();
}

2. Chrome用户可配置的设置 #

如果不想修改代码，可以告知用户调整Chrome的后台行为：

• 输入chrome://flags/#intensive-wake-up-throttling到地址栏，将选项设置为Disabled，重启Chrome后可关闭后台标签的定时器节流（此为实验性选项，可能增加资源消耗）。
• 进入Chrome设置隐私和安全 > 网站设置 > 后台同步，将你的网站域名添加到允许后台同步列表，降低标签被挂起的优先级。

3. PWA的补充说明 #

PWA确实无法绕过Chrome的核心后台节流规则，但可配置Background Sync API暂存上报请求，当标签重新活跃或网络恢复时补传——这适合允许延迟上报的场景，但无法保证严格的30秒间隔，若需实时上报仍需结合Web Workers。

4. 其他注意事项 #

• 坚决避免在主线程依赖setInterval执行上报，即使标签活跃，Chrome也可能对高频主线程定时器进行节流。
• 上报请求尽量轻量化，减少请求体大小，避免因资源占用过高被浏览器限制。

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