如何更新Flutter PWA版本？解决浏览器不加载新版本问题

• 检查Service Worker与Manifest配置

  • 每次发布新版本时，手动递增web/manifest.json里的version字段，让浏览器识别到应用版本变化。
  • 确认Flutter打包时给资源文件自动加上了哈希后缀（默认打包会处理），自定义资源也要确保URL带唯一标识，避免缓存混淆。

• 代码层面触发更新检测
  在main.dart里加入Service Worker更新监听，主动提示用户刷新：

  import 'package:flutter/foundation.dart';
  import 'package:flutter/material.dart';
  import 'package:service_worker/service_worker.dart' as service_worker;
  import 'dart:html' as html;
  
  void main() async {
    WidgetsFlutterBinding.ensureInitialized();
    if (kIsWeb) {
      final registration = await service_worker.registerServiceWorker();
      registration.onUpdateAvailable.listen((_) {
        showDialog(
          context: navigatorKey.currentContext!,
          barrierDismissible: false,
          builder: (ctx) => AlertDialog(
            title: const Text('新版本已就绪'),
            content: const Text('点击更新按钮获取最新内容'),
            actions: [
              TextButton(
                onPressed: () {
                  registration.waiting?.postMessage({'type': 'SKIP_WAITING'});
                  html.window.location.reload();
                },
                child: const Text('立即更新'),
              ),
            ],
          ),
        );
      });
    }
    runApp(const MyApp());
  }
  
  // 记得在MyApp里定义全局navigatorKey
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
  

  同时在web/sw.js里添加消息监听，让新Service Worker立即激活：

  self.addEventListener('message', (event) => {
    if (event.data?.type === 'SKIP_WAITING') {
      self.skipWaiting();
    }
  });
  

• 用户端强制刷新
  让用户用Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，直接绕过浏览器缓存；也可以打开浏览器开发者工具的Application标签，找到Service Workers选项，点击"Update"后刷新页面。

• 服务器缓存策略配置
  对带哈希的静态资源（如main.dart.js、图片、CSS）设置长期缓存，对index.html设置不缓存或强制验证，确保浏览器每次都请求最新的入口文件：
  以Nginx为例：

  # 带哈希的静态资源长期缓存
  location ~* \.(js|css|png|jpg|svg|ico)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }
  
  # index.html 禁止缓存
  location = /index.html {
    expires -1;
    add_header Cache-Control "no-cache, must-revalidate";
  }
  

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