Web 常見問答

並非每個網頁都適合用 Flutter 製作，但我們認為 Flutter 特別適合以應用程式為核心的體驗：

• 漸進式網頁應用程式（Progressive Web Apps）
• 單頁應用程式（Single Page Apps）
• 現有的 Flutter 行動應用程式

目前，Flutter 並不適合用於以大量文字內容為主、以文件流為基礎的靜態網站。例如，部落格文章更適合使用 Web 所建構的文件導向模型，而不是像 Flutter 這類 UI 框架所提供的應用程式導向服務。不過，你_可以_使用 Flutter 將互動式體驗嵌入到這些網站中。

如需更多關於如何在 Web 上使用 Flutter 的資訊，請參閱 Web support for Flutter。

一般來說，Flutter 主要針對動態應用程式體驗設計，Web 端的 Flutter 也不例外。Flutter Web 著重於效能、精確度與一致性。這意味著應用程式的輸出結果，並不符合搜尋引擎正確索引所需的格式。對於靜態或文件型態的 Web 內容，我們建議使用 HTML——就像我們在 flutter.dev、dart.dev 與 pub.dev 所做的一樣。你也應該考慮將主要的應用程式體驗（以 Flutter 建立）與首頁、行銷內容、說明內容（以符合搜尋引擎最佳化的 HTML 製作）分開。

不過，如 roadmap 所述，Flutter 團隊計畫進一步研究 Flutter Web 的搜尋引擎可索引性。

可以！不過目前這功能仍在實驗性旗標之下。如需更多資訊，請參閱 hot reload on the web。

熱重啟（hot restart）則不需要旗標，是一種快速查看變更的方法，無需重新啟動 Web 應用程式並等待編譯與載入。這與 Flutter 行動開發的熱重載功能類似。差別在於熱重載會保留你的狀態，而熱重啟則不會。

Flutter Web 應用程式可在以下瀏覽器執行：

• Chrome（行動裝置與桌面）
• Safari（行動裝置與桌面）
• Edge（行動裝置與桌面）
• Firefox（行動裝置與桌面）

在開發期間，Chrome（於 macOS、Windows 和 Linux 上）以及 Edge（於 Windows 上）支援作為預設的除錯瀏覽器。

你可以在 Android Studio/IntelliJ 與 VS Code 中，選擇 Chrome 或 Edge 作為目標裝置。

所有頻道的裝置下拉選單現在都應該包含 Chrome (web) 選項。

請參閱 Creating responsive apps。

不行。瀏覽器無法存取檔案系統。若需網路功能，請使用 http 套件。請注意，安全性機制略有不同，因為 HTTP 請求的標頭是由瀏覽器（而非應用程式）所控制。

有些套件需要平台特定的匯入，特別是如果它們使用檔案系統（瀏覽器無法存取）。若要在你的應用程式中使用這些套件，請參閱 dart.dev 上的 條件匯入（conditional imports）文件。

Dart 透過 isolates 提供的並行支援，目前尚未在 Flutter Web 中支援。

Flutter Web 應用程式有可能透過 web workers 來達到類似效果，但目前尚未內建支援。

請參閱 Preparing a web app for release。

目前尚未支援。

你可能需要設定 Web 伺服器回傳的 Cache-Control 標頭。例如，若此標頭設為 3600，瀏覽器與 CDN 會將資源快取 1 小時，因此使用者在你部署新版本後，最多可能會看到 1 小時前的舊版本。關於 Web 上的快取機制，請參閱 Prevent unnecessary network requests with the HTTP Cache。

建議你了解這種行為，以避免不良的使用者體驗。部署應用程式後，使用者可能會在快取標頭所定義的期間內，繼續使用快取版本（由瀏覽器或 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 目前尚未支援自動將 build ID 附加到資源上。

如果你正在使用 Firebase Hosting，當你部署新版本的應用程式時，共用快取（CDN）會被自動失效（invalidate）。但你也可以選擇如下方式設定你的快取標頭，讓瀏覽器快取不會快取應用程式腳本，但共用快取仍然會快取。

{
  "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 沒有及時更新，請透過設定 CDN 與瀏覽器快取，將 Cache-Control 標頭設為較小的數值，例如 0 或 60 秒。