前端 IndexedDB 版本升级被阻塞时怎么提示旧页面关闭

前端打开 IndexedDB 的新版本时，如果另一个标签页还握着旧连接，升级请求不会直接失败，而是停在等待状态。真正稳妥的做法是：旧页面监听 versionchange，保存必要状态后调用 db.close()；新页面监听 onblocked，延迟显示“请关闭旧页面”的提示，并在升级继续后撤销提示。

blocked 说明仍有同源数据库连接阻挡版本切换。提示应该由新页面负责，释放连接应该由旧页面负责，两边都处理才不会把责任混在一起。

先把 blocked 看成连接生命周期问题

假设旧标签页已经打开数据库 notes 的第 1 版，新标签页调用 indexedDB.open("notes", 2)。浏览器需要先让旧连接响应版本变化；只要旧连接仍未关闭，升级事务就不能开始，onupgradeneeded 也不会及时到达。

blocked 的含义不是“数据库损坏”，而是升级请求发现还有连接占用当前版本。旧页面收到 versionchange 后调用 close，新页面才可能继续进入升级阶段。

旧页面收到 versionchange 后要真正让出连接

建议把连接关闭逻辑集中在打开成功后的初始化函数里。这样无论连接来自哪个页面，升级通知都遵循同一条路径；如果页面有待保存的编辑内容，要先完成必要的异步保存，再关闭数据库并停止继续发起读写事务。

function connectNotes(version) {
  const request = indexedDB.open("notes", version);

  request.onupgradeneeded = (event) => {
    const db = event.target.result;
    // 只在升级事务中创建对象仓库，避免普通连接阶段修改结构。
    if (!db.objectStoreNames.contains("items")) {
      db.createObjectStore("items", { keyPath: "id" });
    }
  };

  request.onsuccess = () => {
    const db = request.result;
    db.onversionchange = async () => {
      // 生产代码可先保存草稿；保存完成后必须释放旧连接。
      await savePendingDrafts();
      db.close();
      stopUsingDatabase(db);
    };
    startUsingDatabase(db);
  };

  request.onerror = () => showError(request.error);
  return request;
}

这里的关键不是把 close 写在某个固定按钮里，而是让每个连接都能响应升级事件。db.close() 只表示不再接受新的事务；页面自己的状态、定时任务和缓存引用也要一并切换到“等待重新连接”的状态。

让提示只在真正阻塞时出现

新页面可以在 onblocked 中启动一个短延迟计时器。短暂等待可能只是旧页面正在保存数据，不必立即打断用户；如果计时器先触发，再显示“请关闭其他标签页”。一旦进入 onupgradeneeded 或 onsuccess，就撤销计时器并隐藏提示。

function openLatestNotes() {
  const request = indexedDB.open("notes", 2);
  let promptTimer = null;

  request.onblocked = () => {
    // 给旧页面一点时间完成 versionchange 里的异步收尾。
    promptTimer = window.setTimeout(() => {
      showUpgradeMessage("请关闭仍打开旧版本的页面");
    }, 1000);
  };

  request.onupgradeneeded = () => {
    window.clearTimeout(promptTimer);
    hideUpgradeMessage();
  };

  request.onsuccess = () => {
    window.clearTimeout(promptTimer);
    hideUpgradeMessage();
    useLatestDatabase(request.result);
  };

  request.onerror = () => {
    window.clearTimeout(promptTimer);
    showError(request.error?.name || "IndexedDB 打开失败");
  };
}

提示文案最好说明动作和范围，例如“请关闭其他打开本网站的旧页面”。不要让用户误以为要关闭所有浏览器窗口；IndexedDB 的连接边界由同源站点决定，另一个域名的页面不会持有这个数据库连接。

跨标签页验证时要覆盖四个边界

测试时可以先在标签页 A 打开第 1 版，再让标签页 B 请求第 2 版，观察 A 是否收到 versionchange，B 是否短暂触发 blocked，最后是否执行 onupgradeneeded。如果 A 没有任何事件，先检查两个页面是否真的属于同源。

常见问题

为什么只写 onblocked 仍然一直提示？

onblocked 只能告诉新页面有人阻挡升级，不能替旧页面关闭连接。要在所有成功连接上设置 onversionchange 并调用 close。

可以在 versionchange 事件里立刻刷新页面吗？

可以把刷新作为产品策略，但不要跳过必要的草稿保存和连接关闭。更稳妥的方式是先完成收尾，再提示用户重新加载或由应用统一重连。

onupgradeneeded 和 onsuccess 都要隐藏提示吗？

建议两处都清理。升级结构简单时会先进入 onupgradeneeded，而最终可用连接以 onsuccess 为准；两处清理能避免异常路径留下旧提示。

不同子域页面会互相阻塞吗？

通常不会。IndexedDB 受同源策略约束，协议、主机或端口不同就属于不同 origin；真正需要排查的是同一 origin 下打开的多个页面、窗口或 worker。

IndexedDB 升级提示的核心是把两个职责分开：旧页面响应 versionchange 并释放连接，新页面响应 blocked 并给用户清晰提示。再加上异步保存、同源检查和 VersionError 处理，跨标签页升级就不会只剩一句模糊的“打开失败”。