PWA开发：如何防止关闭浏览器时indexedDB与缓存文件被删除

核心原因说明 #

默认情况下浏览器对站点的 IndexedDB、Cache Storage 等存储资源采用临时存储策略，会在浏览器全局存储空间不足、用户开启隐私模式、浏览器配置了关闭自动清理数据时自动清除，并非 IndexedDB 本身的特性问题。 #

可落地的解决方案 #

1. 申请持久化存储权限 #

这是最直接的方案，通过浏览器的 Storage Manager API 申请持久化存储授权，授权通过后除非用户手动删除站点数据/卸载PWA，否则浏览器不会主动清除你的存储数据。
示例代码：

// 页面加载或Service Worker激活时调用即可
async function requestPersistentStorage() {
  if (!navigator.storage || !navigator.storage.persist) {
    console.log('当前浏览器不支持持久化存储申请');
    return false;
  }
  const isGranted = await navigator.storage.persist();
  return isGranted;
}

注意：主流浏览器对已安装到桌面的PWA会直接通过持久化授权，未安装的站点申请时部分浏览器会弹出用户授权提示，符合用户交互规范。Safari 15.2及以上版本、iOS 15.2+ 上安装到桌面的PWA均完全支持该特性，不会被系统自动清理存储数据。

2. 排查异常清理的触发场景 #

• 不要使用隐私/无痕模式测试PWA离线功能，该模式下所有存储都是会话级，关闭窗口就会自动清除，属于浏览器默认行为
• 检查浏览器是否开启了「关闭浏览器时自动清除所有站点数据」的配置，可引导用户将你的PWA加入站点数据白名单
• 确保你的PWA符合可安装标准：manifest.json配置完整、注册了包含fetch事件的Service Worker、支持HTTPS访问，满足条件的PWA获得持久化授权的概率接近100%

3. 存储配额管控 #

即使拿到持久化授权，超出浏览器给站点分配的存储配额也会导致写入失败，可通过API实时监控存储使用情况，提前做好容量预警：

async function getStorageUsage() {
  if (!navigator.storage || !navigator.storage.estimate) return null;
  const { quota, usage } = await navigator.storage.estimate();
  // 已使用比例超过80%时触发用户提示
  if (usage / quota > 0.8) {
    alert('本地存储容量不足，请清理不必要的离线数据');
  }
  return { usage, quota };
}

主流浏览器给已安装PWA的存储配额通常是设备磁盘总容量的10%~20%，足以支撑绝大多数离线场景的Blob数据存储需求。

4. 在线同步兜底 #

针对极端场景（比如用户手动清理了浏览器数据），可以设计增量同步机制，用户上线时自动将本地IndexedDB的变更同步到服务端，本地数据丢失时也可从服务端拉取历史数据恢复。 #

目前IndexedDB + Cache API是唯一支持离线场景下存储大容量Blob类型数据的原生浏览器方案，无需考虑localStorage等不支持二进制存储的接口，按照上述方案配置后即可解决关闭浏览器数据被清空的问题。

内容的提问来源于stack exchange，提问作者Mruga Majmudar