Flutter Web中flutter.js缓存问题及更新方案咨询

核心问题分析 #

浏览器对直接在index.html中引用的flutter.js启用了强缓存，你之前的优化仅针对main.dart.js，未覆盖flutter.js这类更早加载的核心静态资源，导致旧缓存文件持续干扰应用运行。

具体解决方案 #

1. 给flutter.js引用添加版本戳 #

直接修改index.html中flutter.js的引用，绑定Flutter构建时自动生成的serviceWorkerVersion变量，每次构建后URL会带上新的版本参数，强制浏览器重新请求资源：

<!-- 替换原来的flutter.js引用 -->
<script src="flutter.js?v=${serviceWorkerVersion}" defer></script>

serviceWorkerVersion是构建阶段自动注入的动态变量，每次构建都会生成新值，无需手动维护。

2. 配置服务器端缓存策略（关键） #

仅靠前端版本戳无法彻底解决缓存问题，需要在服务器层设置合理的缓存头，避免浏览器对静态资源进行长期强缓存：

• 对于flutter.js、main.dart.js等核心资源，设置Cache-Control为no-cache, must-revalidate，让浏览器每次请求都验证资源是否最新
• 示例Nginx配置：

location ~* \.(js|css)$ {
    add_header Cache-Control "no-cache, must-revalidate";
}

• 若想兼顾性能，可使用stale-while-revalidate策略（允许使用过期缓存同时后台验证更新）：

location ~* \.(js|css)$ {
    add_header Cache-Control "max-age=3600, stale-while-revalidate=86400";
}

3. 增强Service Worker的更新提示 #

修改Service Worker注册逻辑，主动监听更新事件，在新版本可用时提示用户刷新，确保用户能及时获取最新资源：

window.addEventListener('load', function(ev) {
  var loading = document.querySelector('#loading');
  loading.textContent = "Loading entrypoint...";
  
  // 注册Service Worker并监听更新
  navigator.serviceWorker.register('/firebase-messaging-sw.js')
    .then(registration => {
      // 监听新Service Worker安装事件
      registration.addEventListener('updatefound', () => {
        const newWorker = registration.installing;
        newWorker.addEventListener('statechange', () => {
          if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
            // 提示用户刷新页面
            if (confirm('应用已更新，点击确定刷新获取新版本')) {
              window.location.reload();
            }
          }
        });
      });
      // 主动检查Service Worker更新
      registration.update();
    });

  _flutter.loader.loadEntrypoint({
    serviceWorker: {
      serviceWorkerVersion: serviceWorkerVersion,
    },
    onEntrypointLoaded: function(engineInitializer) {
      loading.textContent = "Initializing engine...";
      engineInitializer.initializeEngine().then(function(appRunner) {
        loading.textContent = "Running app...";
        appRunner.runApp();
      });
    }
  });
});

4. 确保构建流程的正确性 #

• 每次部署前执行flutter clean && flutter build web --release，彻底清理旧构建产物
• 检查index.html中serviceWorkerVersion变量是否为动态注入（禁止手动硬编码固定值）

为什么之前的entrypointUrl配置无效？ #

entrypointUrl参数仅控制Flutter加载器对main.dart.js的请求，而flutter.js是在页面初始化阶段直接加载的，不受该参数影响，因此必须单独处理它的缓存问题。

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