Flutter Web发布更新后缓存未生效，自定义清除代码无效求助

发布Flutter Web新版本后，用户需手动清除浏览器缓存才能看到更新，你之前尝试的代码无效，原因及替代方案如下：

原代码无效的原因 #

1. 缓存名称错误：caches.delete('your_cache_name')中的缓存名是硬编码的，但Flutter Web的Service Worker缓存名是自动生成的（格式类似flutter-app-cache-v1），可在浏览器开发者工具「Application -> Cache Storage」中查看实际名称。
2. 执行时机不当：在main()初始化时直接调用清缓存方法，此时Service Worker可能尚未激活，无法操作缓存。
3. 强制刷新参数失效：现代浏览器已忽略location.reload(true)的强制刷新参数，无法强制绕过缓存。

有效解决方案 #

方案1：Service Worker版本控制（推荐） #

Flutter Web默认通过Service Worker管理缓存，只需修改web/manifest.json的版本号，即可触发自动更新：

• 打开web/manifest.json，找到"version": "1.0.0"，每次发布新版本时更新该值（如1.0.1）。
• 确保web/index.html中保留默认的Service Worker注册代码：

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
      navigator.serviceWorker.register('flutter_service_worker.js');
    });
  }
</script>

Service Worker会自动检测版本变化，更新缓存并提示用户刷新。

方案2：给静态资源添加版本哈希 #

通过给Flutter的主资源文件添加版本参数，让浏览器识别为新资源：

• 手动修改web/index.html中的主JS引用：

<script src="main.dart.js?version=1.0.1" type="application/javascript"></script>

• 或构建时自动添加哈希值，执行命令：

flutter build web --release --dart-define=FLUTTER_WEB_CACHING_STRATEGY=none

方案3：版本检测并提示用户刷新 #

在服务器端存储当前版本号，Flutter启动时对比本地存储版本，不一致则提示刷新：

1. 服务器端创建静态文件version.txt，写入当前版本号（如1.0.1）。
2. Flutter代码中实现检测逻辑：

import 'dart:html' as html;

void main() async {
  await checkAppVersion();
  runApp(const MyApp());
}

Future<void> checkAppVersion() async {
  try {
    final response = await html.HttpRequest.getString('/version.txt');
    final currentVersion = response.trim();
    final savedVersion = html.window.localStorage['app_version'];

    if (savedVersion != currentVersion) {
      if (html.window.confirm('发现新版本，是否立即刷新页面？')) {
        html.window.localStorage['app_version'] = currentVersion;
        html.window.location.reload();
      }
    } else {
      html.window.localStorage['app_version'] = currentVersion;
    }
  } catch (_) {}
}

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