极简黑白色系3D后台运行计时器
3D后台运行计时器
10个独立计时器 | 时/分/秒精准计时 | 退出后台仍持续运行
初始化后台服务...
// timer-sw.js：Service Worker 后台计时脚本
const CACHE_NAME = 'timer-cache-v1';
// 存储10个计时器的核心状态（后台持久化）
let timerCoreState = Array.from({ length: 10 }, () => ({
hours: 0,
minutes: 0,
seconds: 0,
isRunning: false,
intervalId: null // 每个计时器的独立计时定时器ID
}));
// 1. 安装事件：缓存必要资源（确保离线可用）
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll([
'./', // 主页面
'https://cdn.tailwindcss.com', // Tailwind CSS
'https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css' // Font Awesome
]))
.then(() => self.skipWaiting()) // 强制激活新SW
);
});
// 2. 激活事件：清理旧缓存，接管所有客户端
self.addEventListener('activate', (event) => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.filter(name => name !== CACHE_NAME)
.map(name => caches.delete(name))
);
})
.then(() => self.clients.claim()) // 接管所有打开的页面
);
});
// 3. fetch事件：优先从缓存加载资源（支持离线使用）
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});
// 4. 消息事件：处理页面发送的指令（开始/暂停/重置/同步状态）
self.addEventListener('message', (event) => {
const { type, timerId } = event.data;
const client = event.source; // 发送消息的页面客户端
// 处理单个计时器指令（开始/暂停/重置）
if (timerId !== undefined) {
const timerIdx = timerId - 1; // 转为0-9索引
switch (type) {
case 'START_TIMER':
startTimer(timerIdx, timerId, client);
break;
case 'PAUSE_TIMER':
pauseTimer(timerIdx, timerId, client);
break;
case 'RESET_TIMER':
resetTimer(timerIdx, timerId, client);
break;
}
}
// 处理所有计时器状态同步请求
if (type === 'SYNC_ALL_STATE') {
syncAllStateToClient(client);
}
});
// 5. 启动计时器：创建interval，每秒更新时间
function startTimer(timerIdx, timerId, client) {
const timer = timerCoreState[timerIdx];
if (timer.isRunning) return;
// 标记为运行中
timer.isRunning = true;
// 创建计时定时器（每秒更新）
timer.intervalId = setInterval(() => {
timer.seconds++;
// 秒满60进1到分
if (timer.seconds >= 60) {
timer.seconds = 0;
timer.minutes++;
// 分满60进1到时
if (timer.minutes >= 60) {
timer.minutes = 0;
timer.hours++;
}
}
// 发送时间更新给页面
sendStateToClient(client, timerId, timer);
}, 1000);
// 发送状态变更给页面
sendStateToClient(client, timerId, timer, 'STATE_CHANGE');
}
// 6. 暂停计时器：清除interval，保留当前时间
function pauseTimer(timerIdx, timerId, client) {
const timer = timerCoreState[timerIdx];
if (!timer.isRunning) return;
// 清除定时器
clearInterval(timer.intervalId);
timer.intervalId = null;
// 标记为未运行
timer.isRunning = false;
// 发送状态变更给页面
sendStateToClient(client, timerId, timer, 'STATE_CHANGE');
}
// 7. 重置计时器：清除interval，时间归零
function resetTimer(timerIdx, timerId, client) {
const timer = timerCoreState[timerIdx];
// 清除定时器（若运行中）
if (timer.intervalId) {
clearInterval(timer.intervalId);
timer.intervalId = null;
}
// 重置时间与状态
timer.hours = 0;
timer.minutes = 0;
timer.seconds = 0;
timer.isRunning = false;
// 发送状态变更给页面
sendStateToClient(client, timerId, timer, 'STATE_CHANGE');
}
// 8. 发送单个计时器状态给页面
function sendStateToClient(client, timerId, timer, type = 'TIME_UPDATE') {
if (client) {
client.postMessage({
type,
timerId,
data: {
hours: timer.hours,
minutes: timer.minutes,
seconds: timer.seconds,
isRunning: timer.isRunning
}
});
}
}
// 9. 同步所有计时器状态给页面
function syncAllStateToClient(client) {
timerCoreState.forEach((timer, idx) => {
const timerId = idx + 1;
sendStateToClient(client, timerId, timer, 'STATE_CHANGE');
});
}