Flutter Web 常见问题

并非每个网页都适合使用 Flutter，但我们认为 Flutter 特别适合应用中心的体验

• 渐进式 Web 应用
• 单页应用
• 现有的 Flutter 移动应用

目前，Flutter 不适用于包含大量文本流式内容的静态网站。例如，博客文章受益于 Web 内置的文档中心模型，而不是像 Flutter 这样的 UI 框架可以提供的应用中心服务。但是，您可以使用 Flutter 将交互式体验嵌入到这些网站中。

有关如何在 Web 上使用 Flutter 的更多信息，请参阅Flutter 的 Web 支持。

通常，Flutter 侧重于动态应用体验。Flutter 的 Web 支持也不例外。Flutter Web 优先考虑性能、保真度和一致性。这意味着应用输出与搜索引擎正确索引所需内容不一致。对于静态或文档类的 Web 内容，我们建议使用 HTML，就像我们在flutter.dev、dart.dev和pub.dev上所做的那样。您还应该考虑将主要应用体验（在 Flutter 中创建）与您的登陆页面、营销内容和帮助内容（使用搜索引擎优化的 HTML 创建）分开。

也就是说，如路线图中所述，Flutter 团队计划调查 Flutter Web 的搜索引擎索引能力。

不，但是您可以使用热重启。热重启是一种快速查看更改的方法，无需重新启动 Web 应用并等待其编译和加载。这与 Flutter 移动开发的热重载功能类似。唯一的区别是热重载会记住您的状态，而热重启不会。

Flutter Web 应用可以在以下浏览器上运行

• Chrome（移动端和桌面端）
• Safari（移动端和桌面端）
• Edge（移动端和桌面端）
• Firefox（移动端和桌面端）

在开发过程中，Chrome（在 macOS、Windows 和 Linux 上）和 Edge（在 Windows 上）被支持为调试应用的默认浏览器。

您可以在 Android Studio/IntelliJ 和 VS Code 中选择**Chrome**或**Edge**作为目标设备。

设备下拉菜单现在应包含所有渠道的**Chrome（Web）**选项。

请参阅创建响应式应用。

不可以。无法从浏览器访问文件系统。对于网络功能，请使用http软件包。请注意，安全性工作方式略有不同，因为浏览器（而不是应用）控制 HTTP 请求上的标头。

某些插件需要平台特定的导入，特别是如果它们使用文件系统（无法从浏览器访问）时。要在您的应用中使用这些插件，请参阅条件导入文档在dart.dev上。

通过隔离实现的 Dart 并发支持目前在 Flutter Web 中不受支持。

Flutter Web 应用可能会通过使用Web 工作线程来解决此问题，尽管没有内置此类支持。

请参阅准备 Web 应用以供发布。

目前无效。

您可能需要配置 Web 服务器返回的Cache-Control标头。例如，如果此标头设置为 3600，则浏览器和 CDN 将缓存资产 1 小时，并且您的用户在部署新版本后最多可能在 1 小时内看到过时的应用版本。有关 Web 上缓存的更多信息，请查看使用 HTTP 缓存防止不必要的网络请求。

最好了解此行为，以避免不良的用户体验。部署应用后，用户可能会使用应用的缓存版本（由浏览器或 CDN 缓存），持续时间由您的缓存标头定义。这可能导致用户使用与已部署到后端服务的更改不兼容的应用版本。

如果您希望在每次部署后都禁用这些缓存标头，一种常见方法是在静态资源的链接中追加某种构建 ID，或更新文件名本身。例如，logo.png可能会变为logo.v123.png。

<!-- Option 1, append build ID as a query parameter in your links -->
<script src="flutter_bootstrap.js?v=123" async></script>

<!-- Option 2, update the filename and update your links -->
<script src="flutter_bootstrap.v123.js" async></script>

Flutter 目前不支持自动将构建 ID 追加到资源。

如果您使用 Firebase 托管，则在部署应用的新版本时，共享缓存 (CDN) 将失效。但是，您可能希望如下配置缓存标头，以便浏览器缓存不缓存应用脚本，但共享缓存缓存。

{
  "hosting": {
    "headers": [
      {
        "source":
          "**/*.@(jpg|jpeg|gif|png|svg|webp|css|eot|otf|ttf|ttc|woff|woff2|font.css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=3600,s-maxage=604800"
          }
        ]
      },
      {
        "source":
          "**/*.@(mjs|js|wasm|json)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=0,s-maxage=604800"
          }
        ]
      }
    ]
  }
}

flutter build web生成的 service worker 已弃用，您可以在运行flutter build web命令时将--pwa-strategy标志设置为none来禁用它。

flutter build web --pwa-strategy=none

如果您希望继续使用 service worker，您可以构建自己的或尝试使用第三方工具，例如Workbox。

如果您的 service worker 未刷新，请通过将Cache-Control标头设置为较小的值（例如 0 或 60 秒）来配置您的 CDN 和浏览器缓存。

除非另有说明，否则此网站上的文档反映了 Flutter 的最新稳定版本。页面最后更新于 2024-11-20。 查看源代码 或 报告问题.