Web 常見問題

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

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

目前，Flutter 不適合內容豐富、以文字流為主的靜態網站。例如，部落格文章受益於以文件為中心的模型 (這是網頁建構的基礎)，而不是像 Flutter 這樣的 UI 框架所能提供的以應用程式為中心的服務。但是，您可以使用 Flutter 將互動式體驗嵌入這些網站中。

如需更多關於如何在網路上使用 Flutter 的資訊，請參閱 Flutter 的 Web 支援。

一般而言，Flutter 適用於動態應用程式體驗。Flutter 的 Web 支援也不例外。Flutter Web 將效能、精確度和一致性置於優先。這表示應用程式的輸出與搜尋引擎正確索引所需的不一致。對於靜態或類似文件的 Web 內容，我們建議使用 HTML，就像我們在 flutter.dev、dart.dev 和 pub.dev 上所做的一樣。您也應該考慮將主要應用程式體驗 (使用 Flutter 建立) 與您的登陸頁面、行銷內容和說明內容 (使用針對搜尋引擎最佳化的 HTML 建立) 分開。

也就是說，如 roadmap 中所述，Flutter 團隊計畫研究 Flutter 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) 選項。

請參閱 建立回應式應用程式。

否。無法從瀏覽器存取檔案系統。對於網路功能，請使用 http 套件。請注意，安全性運作方式略有不同，因為瀏覽器 (而不是應用程式) 會控制 HTTP 請求的標頭。

某些外掛程式需要平台特定的匯入，尤其是當它們使用無法從瀏覽器存取的檔案系統時。若要在您的應用程式中使用這些外掛程式，請參閱 關於條件匯入的說明文件，網址為 dart.dev。

目前 Flutter Web 不支援透過 isolates 提供的 Dart 並行支援。

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

除非另有說明，否則本網站上的說明文件反映了 Flutter 的最新穩定版本。頁面上次更新時間為 2024-11-20。 檢視原始碼 或 回報問題。