`title: 断点续传与离线重放:Service Worker + IndexedDB + OPFS``categories: Web 开发/前端/数据管理``keywords: 断点续传,Service Worker,IndexedDB,OPFS,Background Sync,分块``description: 通过分块与校验记录到 IndexedDB,失败时由 Service Worker 入队并在网络恢复后重放;大文件块存 OPFS,保证离线可靠与幂等。`分块与校验元数据async function putChunkMeta(db, id, idx, hash, size) { return new Promise((resolve, reject) => { const tx = db.transaction('chunks', 'readwrite'); tx.objectStore('chunks').put({ id, idx, hash, size, done: false }); tx.oncomplete = () => resolve(); tx.onerror = () => reject(tx.error); }); } 写块到 OPFS(Worker)async function writeChunkOPFS(name, bytes) { const root = await navigator.storage.getDirectory(); const handle = await root.getFileHandle(name, { create: true }); const sync = await handle.createSyncAccessHandle(); try { sync.write(bytes); sync.flush(); } finally { sync.close(); } } SW 入队与重放self.addEventListener('sync', (e) => { if (e.tag === 'retry-upload') e.waitUntil(replayQueue()); }); 幂等与合并用块哈希与索引判重,只重放缺失或失败块,合并完成后标记。

发表评论 取消回复