Android端Service Worker离线定时通知任务执行异常问题

这种情况我做PWA的时候也碰到过，核心问题其实是安卓Chrome对后台Service Worker的定时器有严格限制，而远程调试时浏览器会临时放宽这些限制，所以才会出现「调试正常、直接访问不行」的差异。下面给你具体的原因和解决方案：

为什么setTimeout在安卓后台不工作？ #

安卓Chrome为了节省电量和系统资源，当页面不在前台、Service Worker进入闲置状态后，会节流甚至暂停setTimeout/setInterval这类定时器。远程调试时，浏览器会判定你在主动调试，所以不会启用这些限制，导致你看到的测试结果和实际使用场景不一致。而且如果Service Worker被浏览器回收，你的定时器会直接失效，完全不可靠。

正确的解决方案：使用Web Periodic Background Sync API #

这个API是专门为Service Worker的定期后台任务设计的，由浏览器统一调度任务，能绕过安卓的后台限制，稳定性也更高。不过有几个前提条件：

• 你的PWA必须已经被添加到用户的主屏幕（处于安装状态）
• 用户已经授予了通知权限
• 安卓Chrome版本需支持该API（目前主流版本都已支持）

步骤1：在前端页面注册定期同步 #

在你的AngularJS初始化脚本或主控制器中添加注册逻辑：

// 注册定期同步任务
async function registerPeriodicAlarmSync() {
  // 先检查浏览器是否支持Periodic Sync
  if ('PeriodicSyncManager' in navigator) {
    try {
      const swRegistration = await navigator.serviceWorker.ready;
      // 注册名为"periodic-alarm"的同步任务，最小间隔15分钟（安卓允许的最小值）
      await swRegistration.periodicSync.register('periodic-alarm', {
        minInterval: 15 * 60 * 1000 // 单位：毫秒
      });
      console.log('定期同步任务注册成功');
    } catch (err) {
      console.error('注册定期同步失败:', err);
    }
  } else {
    console.warn('当前浏览器不支持Periodic Background Sync');
  }
}

// 在页面加载完成或用户授权通知后调用该函数
registerPeriodicAlarmSync();

步骤2：在Service Worker中监听定期同步事件 #

修改你的serviceWorker.js，替换原来的sync监听和alarm函数：

// 监听定期同步事件
self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'periodic-alarm') {
    console.log('定期同步任务触发');
    // 等待通知展示完成后再结束事件
    event.waitUntil(showAlarmNotification());
  }
});

// 展示通知的函数
async function showAlarmNotification() {
  console.log('正在展示通知');
  await self.registration.showNotification('Alert!', {
    // 可添加更多通知配置，比如图标、正文等
    body: '这是定期提醒通知',
    icon: '/path/to/notification-icon.png'
  });
}

额外注意事项 #

1. 最小间隔限制：安卓系统规定Periodic Sync的最小间隔是15分钟，无法设置更短的时间，这是系统层面的限制，目的是避免过度消耗电量。
2. 快速测试方法：不用真的等15分钟，你可以在Chrome DevTools的「Application」标签页找到「Background Sync」，手动点击「Trigger」按钮触发同步任务，快速验证功能。
3. 权限与安装状态：一定要确保用户已授予通知权限，且PWA已被添加到主屏幕，否则Periodic Sync不会生效。

这样修改后，你的定时通知功能在安卓设备上应该就能正常工作了，而且比原来的setTimeout方式更可靠。

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