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 和瀏覽器快取。