如何让React JS PWA在后台持续运行？

一、Web端场景（浏览器环境） #

浏览器对后台页面有严格的资源限制（比如定时器节流、脚本暂停），无法实现完全的后台持续运行，只能通过以下方案模拟需求：

• Service Worker + Web Push 实现消息提醒
  Service Worker是独立于页面的后台脚本，可以在页面关闭后仍监听推送事件。注册Service Worker后，配合后端推送服务，当有新消息时，后端向浏览器推送消息，Service Worker接收后触发系统通知。
  核心代码示例：

  // 注册Service Worker
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/sw.js')
        .then(registration => console.log('SW registered:', registration))
        .catch(err => console.log('SW registration failed:', err));
    });
  }
  
  // sw.js中监听push事件
  self.addEventListener('push', event => {
    const data = event.data?.json();
    const options = {
      body: data.body,
      icon: '/icon.png'
    };
    event.waitUntil(self.registration.showNotification(data.title, options));
  });
  

• 闹钟需求的替代方案
  Web端无法在后台精确触发闹钟铃声，建议结合后端定时任务，到指定时间后向用户浏览器推送通知，用户点击通知唤醒页面后播放铃声。

二、React Native场景（移动端原生应用） #

移动端可以更贴近原生应用的后台运行机制，针对不同需求有明确方案：

1. 闹钟应用后台触发 #

• 使用react-native-push-notification库，支持在后台定时触发本地通知，配置后即使应用关闭也能弹出通知并播放自定义铃声。
  核心配置示例：

  import PushNotification from 'react-native-push-notification';
  
  // 初始化
  PushNotification.configure({
    onNotification: function(notification) {
      // 通知触发时播放铃声
      if (notification.userInteraction) {
        // 处理用户点击逻辑
      }
    },
  });
  
  // 设置定时闹钟
  PushNotification.localNotificationSchedule({
    message: '闹钟响了！',
    date: new Date(Date.now() + 60 * 1000), // 1分钟后触发
    soundName: 'alarm.mp3', // 自定义铃声文件
    playSound: true,
  });
  

• 针对Android，需要在AndroidManifest.xml中添加后台权限：

  <uses-permission android:name="android.permission.WAKE_LOCK" />
  <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
  

• iOS需在Xcode中开启"Background Modes"的"Remote notifications"和"Local notifications"权限。

2. 聊天应用后台消息检测 #

• 使用Firebase Cloud Messaging（FCM）或其他推送服务，通过@react-native-firebase/messaging库接收后台推送。当有新消息时，后端向FCM发送推送，应用在后台甚至关闭状态下也能收到通知。
• 若需要定期拉取消息（而非依赖推送），可使用react-native-background-fetch库，配置后台定时任务，定期调用接口拉取最新消息。注意iOS对后台任务的执行频率有限制，需合理设置间隔。

关键注意事项 #

• 浏览器端：所有后台操作受浏览器策略限制，无法实现无限制的后台运行，优先依赖推送服务。
• 移动端：需严格遵循平台的后台权限规则，iOS对后台任务管控更严格，部分功能需要向苹果申请特殊权限。

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