Web 常见问题

并非每个网页都适合用 Flutter 实现，但我们认为 Flutter 特别适合于应用型体验。

• 渐进式 Web 应用 (PWA)
• 单页应用 (SPA)
• 现有的 Flutter 移动应用

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

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

通常，Flutter 侧重于动态应用程序体验。Flutter 的 Web 支持也不例外。Flutter 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 上的条件导入文档。

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

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 和浏览器缓存。