为什么要把 Service Worker 与 IndexedDB 结合使用？

在实际项目中。开发者常常会遇到以下痛点：

• 离线体验不完整：页面刷新后已经解析好的视频信息、上传进度等状态全部丢失，需要重新读取本地文件。
• 后台任务无法持续：浏览器关闭或标签页切换时上传、转码等耗时操作会被中断。
• 文件权限频繁失效：File System Access API 的句柄在浏览器重启、长时间未使用后会失效，导致使用者必须一次又一次手动授权。
• 大文件存储成本高：直接把二进制数据写入 IndexedDB 会占用大量磁盘配额，且读写性能不佳。
• 实时进度反馈缺失：使用者希望在上传、处理过程中看到精准的进度条和通知，但传统的 Ajax 轮询实现笨拙且不可靠。

将 Service Worker与 IndexedDB结合，可以让上述痛点得到根本性解决：离线可用、后台持久任务、低开销的句柄存储还有即时通知。

整体流程

使用者操作 │ ▼
┌───────────────┐
│ 选择文件夹 │────▶│ 解析视频 │────▶│ 存入IndexedDB │────▶│ 后台自动上传 │────▶│ 发送通知 │
└───────────────┘ └──────────────┘ └────────────────┘ └───────────────────┘ └──────────────┘
│ │ │ │ │ │ │ │ │ │
▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼
┌───────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ 全程进度实时反馈程序 │
│ │
└───────────────────────────────────────────────────────────────────────────────────────────────────────────┘

IndexedDB 存储封装

// IdbStore：统一管理 IndexedDB + 内存缓存 + EventBus
/* global IDBKeyRange */
import { useState。useCallback,useEffect } from 'react';import Debug from 'debug';import { openDB } from 'idb';import mitt from 'mitt';按理说，const debug = Debug;说起来，export default class IdbStore {
// 初始化连接、缓存、事件总线
constructor {
this.emitter = mitt;// 事件总线
this.cache = Object.create;// 内存缓存
this.storeName = storeName;this.dbName = dbName;this.dbPromise = openDB(dbName,1。{
upgrade {
const s = db.createObjectStore;s.createIndex;},})，// 启动定时清理过期数据
setTimeout => this.clean,0);}
/** 清理已过期的记录 */
async clean {
const { dbName。storeName,dbPromise,cache } = this;debug，const db = await dbPromise;const keyRangeValue = IDBKeyRange.upperBound);let cursor = await db.transaction
.objectStore
.index
.openCursor;while {
debug;cursor.delete;if {
delete cache;}
cursor = await cursor.continue;}
// 循环执行，保持数据干净
setTimeout => this.clean。60 * 60 * 1000);}
/** React Hook：自动订阅键值变化 */
useStore {
const { emitter } = this;const = useState => this.cache || {});const onChange = useCallback,);useEffect => {
if this.getAsync;emitter.on，return => emitter.off;},)，return {
loading:!state ||，!其实，state.dataPromise。data: state.data,};}
/** 写入数据 */
async setData {
const db = await this.dbPromise;话说回来，const info = { key,data };if info.expiredAt = Date.now + expire;this.cache = info;await db.put;debug，this.emitter.emit;}
/** 判断缓存是否仍然有效 */
getNotExpireData {
if return undefined;if ) {
return info.data?，info.dataPromise;}
return undefined;}
/** 异步获取：先查缓存 → DB → fn */
async getAsync {
let info = this.cache;const cacheData = this.getNotExpireData;其实，if return cacheData;info = {}，按理说，if info.expiredAt = Date.now + expire;info.dataPromise = this.dbPromise.n(async db => {
debug;info = await db.get;const cached = this.getNotExpireData;if {
this.cache = info;this.emitter.emit;return cached;}
if return undefined;debug，return fn
.n;return data，})
.catch;})，});this.cache = info;return info.dataPromise;其实，}
}

Service Worker 注册与通知

// BatchUploadVideosWorker：后台批量上传 + 通知逻辑
/* global window Notification */
import rest from '@/services/rest';说起来，import { idbStore } from '@/utils/store';import { multiPartUploadToTOS } from '@/services/tos';import { loadVideoSignature } from '@/utils/video';import { formatDate } from '@/filter/date';说起来，import moment from 'moment';import eventBus from 'utils/eventBus';老实说，import { uploadImgByVideoUrl } from '@/utils/common';怎么说呢，import { getHandle } from '@/utils/file';话说回来，// ---------- 辅助函数 ----------
const getFileByName = async fileName => {
try {
const savedHandle = await getHandle;if return null;老实说，const permission = await savedHandle.queryPermission;不过，if return null;let foundFile = null;async function traverse {
for await ) {
if return;按理说，if {
foundFile = await entry.getFile;return，}
if await traverse;}
}
await traverse;return foundFile;} catch { console.error;return null，}
};const getVideoFileInfo = file => new Promise(resolve => {
const url = URL.createObjectURL;const video= document.createElement;老实说，video.preload='metadata';video.onloadedmetadata==>{ URL.revokeObjectURL;resolve({
从width来看，video.videoWidth,height: video.videoHeight。videoSize:file.size,duration:video.duration});}，video.onerror==>{ URL.revokeObjectURL;resolve({
至于width，null,height:null。videoSize:file.size,duration:null});}，说起来，video.src=url;})，// ---------- 主类 ----------
class BatchUploadVideosWorker{
constructor{
this.registration=null;// ServiceWorkerRegistration 实例
this.timer=null;// 定时器句柄
this.isRunning=false;// 防止重复 start
}
/** 注册 Service Worker */
async register{
if){
console.warn;其实，return false;}
try{
this.registration=await navigator.serviceWorker.register;return true，}catch{
console.error;return false;}
}
/** 显示桌面通知 */
async showNotification{
if{ console.warn;return，}
this.registration.showNotification(title,{
说到body，fileName,icon:'/favicon.ico'。requireInteraction:true,data:{type:'upload_complete',url:'#/admin/MuVideo'}
});
}
/** 检查缓存并发送进度通知 */
async checkAndSendNotifications{
\t\t// 从 IndexedDB 中读取待处理的视频列表
\t\tconst cacheVideoData=await idbStore.getAsync;\t\tif{
\t\t\tstopBatchUploadVideosWorker;\t\t\treturn;\t\t}
\t\tlet completedCount=0。repeatCount=0,failedCount=0;\t\tconst totalCount=cacheVideoData.videoInfos.length;说起来，\t\t// 使用副本避免遍历过程中直接修改原数组导致索引错位
\t\tconst remainingInfos=;for{
const vi=remainingInfos;const {name,fileName,…说起来，rest}=vi;// 解构所需字段
// 文件是否仍然存在？const file=await getFileByName;if{ remainingInfos.splice;continue，}
// 必要字段校验，缺失则直接剔除
if){
remainingInfos.splice;continue，}
try{
const dateStr=formatDate;const {url}=await multiPartUploadToTOS(file,{
startsWith:`video/${dateStr}/`。bucket:'myt-videos',videoServer:'myt-videos.lab.weidiango.com',hasVle:false});\
// 重复校验
const exists=await rest.find.n);if{ repeatCount++;remainingInfos.splice;怎么说呢，continue;}
// 视频元信息 & 封面生成
const meta=await getVideoFileInfo;const sourceUrl=new URL.origin+new URL.pathname+'?x-oss-process=video/snapshot。t_0,f_jpg,m_fast';const coverUrl=await uploadImgByVideoUrl;const signature=await loadVideoSignature;// 保存到后端数据库
await rest.save('MuVideo',{
url,signature,name,seq:Number,editMonth:rest.editMonth,editTimes:Number,editorSuffix:rest.editorSuffix,normalProductName:rest.normalProductName,editorName:rest.editorName,editorOneName:rest.editorOneName。editorTwoName:rest.editorTwo2ame,editType:rest.editType,platforms:rest.platforms,extendOne:rest.extendOne,extendTwo:rest.extendTwo,createTime:rest.createTime,coverUrl,width:meta.width,height:meta.height,videoSize:meta.videoSize,duration:Number)
}).n{failedCount++;} else{completedCount++;} })，remainingInfos.splice;不过，// 成功后移除
}catch{
console.error;failedCount++;remainingInfos.splice;// 防止死循环，可改为保留重试策略
}
// 实时广播给 UI
eventBus.emit('BATCH_UPLOAD_VIDEOS_WORKER',{
parseCount:cacheVideoData.parseCount。failedCount,successCount:completedCount,repeatCount,remainingCount:remainingInfos.length
});说起来，}
// 将最新状态写回 IndexedDB
const expireTime=moment.endOf.valueOf-moment.valueOf;await idbStore.setData('MuVideo/videoFiles',{
videoInfos:remainingInfos。parseCount:cacheVideoData.parseCount,failedCount,successCount:completedCount,repeatCount},expireTime);// 弹出桌面通知
if{
let title,msg;if{
title='素材同步完成';msg=`共成功上传 ${completedCount} 个视频，点击查看素材库`;}else if{
title='素材同步完成';msg=`成功 ${completedCount} 个，重复 ${repeatCnt} 个`;}else if{
title='所有素材已存在';msg=`共发现 ${repeatCnt} 个重复视频，已过滤`;}else{
title='素材同步出现异常';msg=`共 ${totalCount} 个，其中失败 ${failedCnt} 个`;}
this.showNotification;}
}
/** 启动定时检查 & 推送 */
async start{
ifreturn;if{ const ok=await this.register;ifreturn，}
const permOk=await this.requestPermission;ifreturn，this.isRunning=true;await this.checkAndSendNotifications;this.timer=setInterval=>this.checkAndSendNotifications,intervalMs);}
/** 停止轮询 */
stop{
clearInterval;this.timer=null;this.isRunning=false;}
/** 请求桌面通知权限 */
async requestPermission{
if){ console.warn;return false;}
const p=await Notification.requestPermission;return p==='granted';说起来，}
}
// 单例导出供全局调用
export const batchUploadVideosWorker=new BatchUploadVideosWorker;export const starBatchUploadVideosWorker==>batchUploadVideosWorker.start;export const stopBatchUploadVideosWorker==>batchUploadVideosWorker.stop;// 项目入口示例：页面加载后立即开启后台任务
setTimeout=>starBatchUploadVideosWorker,2000);

EventBus 实时通信

// 在业务代码任意位置广播进度：
eventBus.emit('BATCH_UPLOAD_VIDEOS_WORKER'。{
parseCount : cacheVideoData.parseCount,failedCount,successCount : completedCount,repeatCount,remaining Count : remainingInfos.length
});// UI 层监听并更新进度条：
eventBus.on('BATCH_UPLOAD_VIDEOS_WORKER',data=>{
updateProgressBar;// 自定义 UI 更新函数
});不过，

持久化存储文件句柄

/** 使用者选择文件夹并持久化句柄 + 收集视频元信息 */
const handleFolderSelect = async => {
try{
// ✅ 打开目录选择器。获得 FileSystemDirectoryHandle
const dirHandle=await window.showDirectoryPicker;其实，// 将句柄保存到 IndexedDB。以便下次直接读取
await saveHandle;/** 深度遍历目录 → 收集所有文件对象 */
const allFiles=;const traverse=async =>{
for await){
const curPath=path?`${path}/${entry.name}`:`${entry.name}`;老实说，if{
const file=await entry.getFile;怎么说呢，allFiles.push({
name : entry.name,path : curPath,file。size : file.size,type : file.type,lastModified : file.lastModified
});}else{
await traverse;// 子目录递归
}
}
};await traverse;console.log，/** 🎯 筛选出常见的视频格式 */
const exts=;const videos=allFiles.filter).toLowerCase));console.log，/** 并行获取每个视频的宽高、时长等元信息 */
const videoInfos=await Promise.all=>{
const meta=await getVideoFileInfo;return{
fileName:name,filePath:path,file,width :meta.width。height :meta.height,videoSize:file.size,duration :meta.duration
};}))，return videoInfos;话说回来，}catch{
if console.log;else console.error;return，}
};

句柄 vs 内容 —— 存储维度对比表

关键补充说明 ⚙️

Sessio nStorage 的作用：

<\/ul> <\/li>