定时提醒功能实现
Vue应用中定时提醒功能的实现方案
#tech / dev / frame
#type / howto
#status / growing
定时提醒功能实现
准备
期望实现定时提醒功能，类似闹钟，在指定的时间就弹窗提醒
利用之前实现的 任务队列模块 和 弹窗通知模块
新建一个提醒任务时，存储好 时间配置、提醒内容、重要程度 等参数
工作流程
目前实现的任务队列模块是将任务队列保存在内存中，程序退出时会消失，所以每次启动都要初始化：
- 获取所有提醒任务，并调用 任务队列模块 将所有任务加入队列，同时添加一个任务触发器（观察者）来接收时间到达的消息，并将任务触发器的任务设置为 调用弹窗提醒服务
- 时间到达时，任务队列主进程服务 发送通知给 渲染进程任务队列服务，然后触发任务，显示弹窗
添加函数，在启用提醒任务时，直接调用 任务队列模块，将其时间配置转化为 cron 表达式，加入任务队列
代码实现
任务队列初始化代码
// useReminderInit.ts
import { useReminderStore } from "@/modules/Reminder/stores/reminderStore";
import { scheduleService } from "@/modules/schedule/services/scheduleService";
import { notificationService } from "@/modules/notification/services/notificationService";
import { onMounted, onUnmounted } from "vue";
import type { UrgencyLevel } from "@/shared/types/time";
export function useReminderInit() {
const reminderStore = useReminderStore();
let cleanup: (() => void) | null = null;
const handleReminderNotification = async (reminder: {
title: string;
body: string;
urgency: UrgencyLevel;
}) => {
switch (reminder.urgency) {
case "critical":
await notificationService.showWarning(reminder.title, reminder.body);
break;
case "normal":
case "low":
await notificationService.showSimple(reminder.title, reminder.body);
break;
}
};
const initializeReminders = async () => {
await reminderStore.initializeSchedules();
cleanup = scheduleService.onScheduleTriggered(({ task }) => {
// {
// id: 'some-schedule-id',
// task: {
// type: 'REMINDER',
// payload: { title: '...', body: '...', urgency: '...' }
// },
// timestamp: 1234567890
// }
//
// 通过解构赋值，只取出 task 部分
if (task.type === "REMINDER") {
handleReminderNotification(task.payload);
}
});
};
onMounted(() => {
initializeReminders();
});
onUnmounted(() => {
if (cleanup) {
cleanup();
}
});
return {
initializeReminders,
};
}