Safari浏览器下navigator.storage.estimate()的替代方案有哪些？

核心结论 #

目前所有Safari版本均无公开可用的官方API可以直接获取PWA的总存储空间占用，你查阅到的“无原生替代方案”的结论是准确的。

相关API的兼容情况 #

• 标准API：navigator.storage.estimate() 尚未被Safari纳入适配计划，调用该方法在Safari下会始终返回无效值
• 废弃私有API：window.webkitStorageInfo、navigator.webkitTemporaryStorage 在Safari 13及以上版本已被完全移除，无调用可能

可行的降级实现方案 #

如果要向用户展示存储占用信息，可以采用自行统计的方式得到估算值：

1. LocalStorage占用统计：每次写入/删除内容时，计算存储字符串的长度，按UTF-16编码规则（1字符占2字节）换算得到实际占用大小，累加记录
2. IndexedDB占用统计：每次写入数据时将序列化后的数据大小计入专门的统计字段，读取时直接取用累加值
3. Cache API缓存统计：每次新增/删除缓存资源时，读取响应头的Content-Length字段值累加，得到静态资源缓存的总大小

前端展示兼容逻辑 #

做简单的环境判断即可实现双端兼容：

async function getStorageUsage() {
  // 支持标准API的环境直接调用
  if (navigator.storage?.estimate) {
    const estimate = await navigator.storage.estimate();
    return {
      usage: estimate.usage,
      isEstimate: false
    }
  }
  // Safari环境返回自行统计的估算值
  return {
    usage: getCustomCalculatedUsage(), // 自行实现的统计逻辑
    isEstimate: true
  }
}

Safari环境下展示时可以标注为估算存储占用，避免用户产生数值精度的疑问。

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