尽管 flutter_bootstrap_js 有新版本，Flutter Web 服务工作线程缓存并未立即更新

Question

问题描述

我遇到了 Flutter Web Service Worker 缓存问题。更新我的 Flutter Web 应用程序时，

flutter_bootstrap_js

中的 Service Worker 版本会更新，但实际内容不会立即反映更改。

我在做什么

1. 我正在使用 Flutter Web 配置，其中

   {{flutter_bootstrap_js}}

   被替换为

   index.html

   中的实际引导代码：

   <script>
   {{flutter_bootstrap_js}}
   </script>
   

这会在代码中正确生成更新的 Service Worker 版本：

```javascript
_flutter.loader.load({
    serviceWorkerSettings: {
        serviceWorkerVersion: "382593536"
    }
});
```

问题

• 尽管生成的代码中更新了 Service Worker 版本，但实际内容/UI 更改并未立即反映出来
• 即使清除所有浏览器缓存后，旧版本仍然存在
• 奇怪的是，变化确实会在一段时间后出现（通常是第二天）

我尝试过的事情

• 清除所有浏览器缓存
• 硬刷新（Ctrl+F5）
• 等待一段时间

预期行为

当 Service Worker 版本在

flutter_bootstrap_js

中更新时，更改应在刷新后立即反映出来。

实际行为

尽管代码中存在新的 Service Worker 版本，旧版本仍然存在，并且更改仅在显着延迟（数小时或第二天）后才会出现。

环境

• 颤动网络
• 浏览器：Chrome（PC、iPhone、Galaxy）、Safari（iPhone）
• 颤振版本：3.27.1

问题

1. 尽管有了新版本号，为什么 Service Worker 没有立即更新？
2. 有没有办法强制立即更新 Service Worker 缓存？
3. 在 Flutter Web 中处理 Service Worker 更新以确保内容立即更新的正确方法是什么？

如果您能深入了解这种缓存行为以及如何正确处理 Flutter Web 应用程序中的 Service Worker 更新，我们将不胜感激。

标签：

flutter

flutter-web

service-worker

caching

web

当 Service Worker 版本在

flutter_bootstrap_js

中更新时，更改应在刷新后立即反映出来。

Answer 1

回答

该问题与 Cloudflare 缓存有关，而不是 Flutter Service Worker 本身。以下是发生的情况以及解决方法：

根本原因

即使 Service Worker 版本在

flutter_bootstrap_js

中正确更新，Cloudflare 仍在提供资产的缓存版本，从而阻止立即加载新版本。

解决方案

要解决此问题，您需要：

1. 清除 Cloudflare 的缓存：

   • 转到 Cloudflare 仪表板
   • 选择您的域名
   • 导航到“缓存”>“配置”
   • 单击“清除缓存”>“清除所有内容”

2. （可选）在开发过程中，您可以：

   • 暂时在 Cloudflare 中启用开发模式
   • 或者创建页面规则来绕过特定 URL 的缓存

补充说明

• 看到更新的延迟（第二天）是由于 Cloudflare 的缓存过期
• 如果 CDN 正在缓存内容，仅清除浏览器缓存并无帮助
• 这并不是 Flutter 的 Service Worker 特有的，而是 CDN 缓存行为

希望这可以帮助其他可能在 Cloudflare 背后的 Flutter Web 部署中遇到类似问题的人！

标签：

cloudflare

、

flutter-web

、

caching

、

cdn