主页 / coding / 问题 / 79349247
Accepted
Jaesang Song
Asked: 2025-01-12 10:28:16 +0800 CST

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

  • 772

问题描述

我遇到了 Flutter Web Service Worker 缓存问题。更新 Flutter Web 应用程序时，Service Worker 版本flutter_bootstrap_js会更新，但实际内容不会立即反映更改。

我正在做什么

  1. 我正在使用 Flutter Web 配置，其中{{flutter_bootstrap_js}}将其替换为实际的引导代码index.html：

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

这会在代码中正确生成更新的服务工作线程版本：

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

问题

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

我尝试过的方法

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

预期行为

当服务工作线程版本在 中更新时flutter_bootstrap_js，更改应在刷新后立即反映出来。

实际行为

尽管代码中存在新的服务工作线程版本，但旧版本仍然存在，并且更改仅在相当长的延迟（数小时或第二天）后才会出现。

环境

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

问题

  1. 为什么尽管版本号有了变化，服务工作线程却没有立即更新？
  2. 有没有办法强制立即更新服务工作者缓存？
  3. 在 Flutter web 中处理服务工作线程更新以确保立即更新内容的正确方法是什么？

非常感谢您对此缓存行为以及如何正确处理 Flutter Web 应用程序中的服务工作线程更新的任何见解。

标签：flutter flutter-web service-worker caching web

当服务工作线程版本在 中更新时flutter_bootstrap_js，更改应在刷新后立即反映出来。

flutter

1 个回答

  1. Best Answer

    回答

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

    根本原因

    尽管服务工作线程版本在 中正确更新flutter_bootstrap_js，但 Cloudflare 提供的是资产的缓存版本，导致无法立即加载新版本。

    解决方案

    要解决此问题，您需要：

    1. 清除 Cloudflare 的缓存：

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

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

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

    其他说明

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

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

    标签：cloudflare，，，flutter-web​cachingcdn

    • 0

相关问题