Web 常见问题

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

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

目前，Flutter 不适合内容丰富、以文本流为主的静态网站。例如，博客文章受益于网络围绕的文档中心模型，而不是像 Flutter 这样的 UI 框架可以提供的以应用为中心的服务。但是，您可以使用 Flutter 将交互式体验嵌入到这些网站中。

有关如何使用 Flutter 进行网页开发的更多信息，请参阅 Flutter 的网页支持。

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

不过，正如 路线图 中提到的，Flutter 团队计划研究 Flutter 网页版的搜索引擎索引能力。

是的！尽管目前它仍然是一个实验性标志。更多信息，请查看 网页版热重载。

热重启不需要标志，并且是快速查看更改的一种方式，无需重新启动网页版应用并等待其编译和加载。这与 Flutter 移动开发的热重载功能类似。区别在于热重载会记住您的状态，而热重启不会。

Flutter 网页版应用可以在以下浏览器上运行：

• 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 网页版中不支持。

Flutter 网页版应用可以通过使用 Web Workers 来规避此问题，尽管没有内置支持。

请参阅 准备网页版应用以供发布。

目前不行。

您可能需要配置您的 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 生成的服务工作线程已弃用，您可以在运行 flutter build web 命令时将 --pwa-strategy 标志设置为 none 来禁用它。

flutter build web --pwa-strategy=none

如果您想继续使用服务工作线程，您可以 自行构建 或尝试第三方工具，例如 Workbox。

如果您的服务工作线程未刷新，请将 Cache-Control 标头设置为较小的值（例如 0 或 60 秒）来配置您的 CDN 和浏览器缓存。