Web 常見問題

並非所有的網頁都適合用 Flutter 開發，但我們認為 Flutter 特別適合以應用為中心的體驗：

• 漸進式 Web 應用 (PWA)
• 單頁應用 (SPA)
• 現有的 Flutter 移動應用

目前，Flutter 不適合用於內容豐富、基於流式佈局的靜態網站。例如，部落格文章更受益於 Web 原生的文件中心模型，而不是像 Flutter 這樣的 UI 框架所能提供的以應用為中心的服務。不過，你可以使用 Flutter 將互動式體驗嵌入到這些網站中。

有關如何使用 Flutter Web 的更多資訊，請參閱 Flutter 的 Web 支援。

總體而言，Flutter 面向的是動態應用體驗。Flutter 的 Web 支援也不例外。Flutter Web 優先考慮效能、保真度和一致性。這意味著應用輸出的內容與搜尋引擎正確索引所需的內容並不一致。

不過，由社群釋出的 Dart 包 Jaspr 確實支援靜態網站。事實上，Dart 文件、Flutter 文件 和 Flutter 營銷 網站都已經遷移到使用 Jaspr 包。

總結一下，對於靜態或文件類 Web 內容，我們建議使用：

1. Jaspr：如果你想使用 Dart，但想要一個傳統的基於 DOM 的網站。另請注意，Jaspr 的 SEO 工作方式與傳統網站相同。
2. HTML：在這種情況下，請考慮將你的主要應用體驗（使用 Flutter 建立）與落地頁、營銷內容和幫助內容（使用搜索引擎最佳化的 HTML 建立）分開。

可以！有關更多資訊，請檢視 Web 上的熱過載。

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 對使用 Isolate 的併發支援目前在 Flutter Web 中尚不支援。

Flutter Web 應用可以透過使用 Web Workers 來繞過此限制，儘管這種支援並非內建的。

請參閱 準備 Web 應用以進行釋出。

不能。雖然在為 Web 編譯時從技術上可以匯入 dart:io，但呼叫任何 Platform.isXYZ 方法都會丟擲 UnsupportedError。此外，在包中匯入 dart:io（除非透過條件匯入）會導致 pub.dev 將該包評定為不支援 Web。

• 如果你正在開發 Flutter 應用，請考慮使用 kIsWeb。
• 如果你正在開發包（特別是沒有 Flutter 依賴的包），請考慮使用 os_detect 包。

你可能需要配置 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 和瀏覽器快取。