use-upgrade

FAQ ​

此工具如何存储数据？ ​

use-upgrade 有两种数据存储：页面数据、跨页数据。

页面数据，适用于当前页面实例，记录本地版本哈希、配置项、本地检查时间等信息，通过全局变量挂载在 window 上，这是为了让 React Hook / Vue Hook 也能访问，因为 Hook 在发布时是独立打包的。

跨页数据，记录远程版本哈希、最近请求时间等信息，通过 localStorage 存储，这样可以使得其他浏览器标签页也能访问。

对于跨页数据，可通过 storageKey 配置项定制存储键名。页面数据目前不支持定制键名。

什么是 “本地检查” 和 “远程检查” ？ ​

“本地检查”，指的是 use-upgrade 检查页面存储的版本哈希和 localStorage 中存储的版本哈希，判断是否匹配，以此来判断当前页面版本是否 “过时”；这个过程无网络开销，但只能通过其他浏览器标签页得到的最新数据来判断是否有新版本。

“远程检查”，指的是发出对 index.html 的请求，计算哈希值并存储在 localStorage，然后再进行一次 “本地检查”；这个过程需发出网络请求，有一定开销，但必定能确保获取到最新的版本哈希，这个最新版本哈希也会传播给其他浏览器标签页。

通常情况下，“本地检查” 会频繁触发，每次触发时还会判断是否应发起 “远程检查”，后者会在达到开发者要求的时间间隔后被发起。

此工具在多标签页场景下如何运作？ ​

use-upgrade 设计为尽可能减小开销，即使多标签页场景也不会产生网络流量的浪费。

使用 localStorage 存储跨页面数据，这包括了上次请求的时间、最新远程版本哈希，在多个标签页之间共享，确保在满足时间间隔前不会有请求发出，也使得任一标签页检测到新版本时，所有其它标签页也能接收到，因为每个标签页的本地检查会频繁触发。

发起网络请求的标签页会在 localStorage 中 “加锁”，确保同一时间仅有一个标签页进行网络活动；“加锁” 也具有解锁时间，避免长时间无法解锁产生问题。

如何避免 index.html 被缓存？ ​

首先，本工具在请求 index.html 时会加上时间戳作为查询参数，避免拉取到旧的文件；开发者可通过 disableTimestamp 配置项来禁用此行为。

如果网站使用代理网关，例如 Cloudflare 或 Vercel，则默认已配置了 .html 禁用缓存。

如果是自己部署的网站，推荐配置 Nginx，避免 index.html 这个文件被缓存。

配置方式示例：

nginx
location / {
  alias /path/to/your/website;
  try_files $uri @my-website;
  index index.html;
}

location @my-website {
  root /path/to/your/website;
  try_files /index.html =404;
  add_header Cache-Control "private, no-cache, max-age=0";
}