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 上的热重载。

热重启不需要标志，它是一种快速查看更改的方式，无需重新启动 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 上条件导入的文档。

Flutter Web 目前不支持 Dart 通过隔离区 (isolates) 实现的并发支持。

Flutter Web 应用可以通过使用Web Workers 来解决此问题，尽管目前没有内置支持。

请参阅为发布准备 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 Hosting，部署新版本的应用时，共享缓存 (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 和浏览器缓存。