如何避免Expo每日定时通知在通知栏堆叠？

我使用expo-notifications实现每日重复通知，核心代码如下：

Notifications.scheduleNotificationAsync({
  content: {
    title: "Title",
    body: 'Message',
  },
  trigger: {
    hour: hrInt,
    minute: minInt,
    repeats: true,
  },
});

其中hrInt和minInt是用户输入的时间参数，通知功能正常，但存在一个问题：如果用户未点击或清除旧通知，每日新通知到达时会在通知栏堆叠，最多可能积累上百条，我需要避免这种情况。

我原本期望实现以下两种方案之一：

• 方案A：在下次通知到达前清除通知栏中的旧通知
• 方案B：若通知栏中仍存在未处理的通知，则不发送新通知

方案A的尝试与问题 #

我尝试用Expo Task Manager和Background Fetch调度后台任务来清除旧通知，核心代码如下：

const BACKGROUND_FETCH_TASK = 'background-fetch';

TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
  Notifications.dismissAllNotificationsAsync();
  return BackgroundFetch.BackgroundFetchResult.NewData;
});

async function unregisterBackgroundFetchAsync() {
  return BackgroundFetch.unregisterTaskAsync(BACKGROUND_FETCH_TASK);
}

async function registerBackgroundFetchAsync(taskTime) {
  const taskRegistration = await BackgroundFetch.registerTaskAsync(BACKGROUND_FETCH_TASK, {
    minimumInterval: taskTime,
    stopOnTerminate: false,
    startOnBoot: true,
  });

  if (taskRegistration) {
    console.log('Unregistering background fetch task');
    await BackgroundFetch.unregisterTaskAsync(BACKGROUND_FETCH_TASK);
  }
}

初始化逻辑：

useEffect(() => {
  MakeNotificationTime();
}, [])

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: true,
  }),
});

const MakeNotificationTime = async () => {
  Notifications.cancelAllScheduledNotificationsAsync();

  const hr = (await getData('notificationHr')) ?? 12;
  const min = (await getData('notificationMin')) ?? 0;
  const hrInt = parseInt(hr);
  const minInt = parseInt(min);

  const now = new Date();
  const nowHr = now.getHours();
  const nowMin = now.getMinutes();
  const nowSec = now.getSeconds();

  const hrDif = hrInt - nowHr;
  const minDif = minInt - nowMin;
  const taskTime = (hrDif * 60 * 60) + (minDif * 60) - nowSec - 5;
  console.log("Task time: " + taskTime);

  Notifications.scheduleNotificationAsync({
    content: {
      title: "Title",
      body: 'Message',
    },
    trigger: {
      hour: hrInt,
      minute: minInt,
      repeats: true,
    },
  });
  
  unregisterBackgroundFetchAsync();
  registerBackgroundFetchAsync(taskTime);
  checkStatusAsync();
  getAllScheduledNotifications();
}

但实际效果不符合预期：Background Fetch仅在应用进入后台后才开始计时，无法实现注册后立即计时的需求，且任务执行不稳定，时灵时不灵。

方案B的尝试与瓶颈 #

我考虑改为调度非重复通知，在用户点击通知或进入应用时重新调度，但Expo的addNotificationResponseReceivedListener无法监听用户清除通知的事件——如果用户手动清除通知，后续将无法触发重新调度，不符合每日重复通知的需求。

可行解决方案建议 #

1. 使用固定通知ID覆盖旧通知

给通知设置唯一的identifier参数，这样每次新通知触发时，会自动替换通知栏中同ID的旧通知，从根源上避免堆叠：

Notifications.scheduleNotificationAsync({
  content: {
    title: "Title",
    body: 'Message',
  },
  trigger: {
    hour: hrInt,
    minute: minInt,
    repeats: true,
  },
  identifier: "daily-reminder" // 固定唯一ID
});

这个方法无需额外后台任务，依赖系统通知的ID替换机制，稳定性最高。

2. 改进方案A的后台任务实现

如果坚持用后台任务清除旧通知，需要注意：

• Background Fetch的minimumInterval是指两次任务执行的最小间隔，不是注册后延迟执行的时间，无法用来精准控制在通知前5秒执行
• 改用Expo的TaskManager结合定时触发的任务（而非Background Fetch），或者额外调度一个非重复通知，触发时间比正式通知早5秒，在这个通知的处理逻辑中清除所有旧通知

3. 结合应用生命周期监听

在应用回到前台时，主动清除通知栏中的旧通知，减少堆叠的可能：

useEffect(() => {
  const subscription = AppState.addEventListener('change', (nextAppState) => {
    if (nextAppState === 'active') {
      Notifications.dismissAllNotificationsAsync();
    }
  });
  return () => subscription.remove();
}, []);

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