Android端Chrome浏览器失焦时setTimeout不可靠问题的解决方案咨询

核心问题根源 #

Android Chrome在后台时会启用后台定时器节流，大幅限制setTimeout/setInterval的执行频率甚至直接暂停；而Service Worker本身是事件驱动的临时进程，浏览器会在空闲时自动回收，没有办法强制它持续运行，所以轮询逻辑不管放在页面还是Service Worker里，都无法保证后台可靠性。

最优解决方案：替换轮询为Web Push API #

这是解决Web应用后台实时通知的标准方案，完全不需要前端主动轮询，由后端主动推送消息到客户端：

• 前端流程：
  1. 注册Service Worker，申请用户的通知推送权限
  2. 获取推送订阅对象（包含推送服务的endpoint地址），将其发送到PHP后端存储（关联用户ID）
  3. 在Service Worker中监听push事件，收到推送后调用self.registration.showNotification()展示桌面/系统通知
• 后端流程：
  1. 当有新消息时，从数据库取出目标用户的推送订阅信息
  2. 使用Web Push库（比如PHP的web-push包），向对应的endpoint发送推送 payload
• 优势：不受浏览器后台状态影响，只要设备联网且Service Worker已注册，就能收到实时推送，完全规避定时器和Service Worker休眠问题
• 注意：必须在HTTPS环境下运行（localhost开发除外）

临时替代优化方案（无法使用Web Push时） #

如果暂时无法接入Web Push，可以尝试以下方式提升可靠性：

页面定时器优化 #

• 不要用setInterval，改用链式setTimeout调用（每次请求完成后再设置下一次定时器），避免累积延迟
• 延长轮询间隔（比如从30秒改为1分钟），降低触发频率，减少被浏览器节流的概率
• 监听页面的visibilitychange事件，当页面失焦时延长轮询间隔，聚焦时恢复正常间隔

Service Worker优化 #

• 使用Background Sync API：将轮询任务注册为后台同步任务，浏览器会在设备在线且资源充足时自动触发，即使Service Worker被回收也能保证任务执行

  // 页面中注册同步任务
  navigator.serviceWorker.ready.then(reg => {
    reg.sync.register('check-new-messages');
  });
  
  // Service Worker中监听同步事件
  self.addEventListener('sync', event => {
    if (event.tag === 'check-new-messages') {
      event.waitUntil(fetch('/api/check-messages')
        .then(res => res.json())
        .then(data => {
          if (data.hasNew) {
            return self.registration.showNotification('新消息', { body: data.content });
          }
        })
      );
    }
  });
  

• 在Service Worker的事件处理中使用event.waitUntil()，延长Service Worker的生命周期，确保任务完成后再被休眠
• 同样不要设置过短的同步间隔，避免被浏览器判定为滥用

关于Service Worker休眠的误区 #

没有任何特殊指令能强制Service Worker持续运行，浏览器会根据系统资源、电池状态自动回收空闲的Service Worker。只有当有push、sync、fetch等事件触发时，Service Worker才会被短暂唤醒执行任务，执行完成后很快会进入休眠状态。

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