断点续传与离线重放：Service Worker + IndexedDB + OPFS

`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());

});

幂等与合并用块哈希与索引判重，只重放缺失或失败块，合并完成后标记。