【文章翻譯】Flutter: What’s next on the Web?

【文章內容使用 Gemini 1.5 Pro 自動產生】

我們對未來版本優先考慮事項，重點關注效能、開發者體驗和 Web 整合

Flutter 的 Web 支援在 2021 年 3 月達到了穩定里程碑。那麼接下來呢？

根據我們的使用者研究，Web 是超過 10% Flutter 專案的目標。因此，我們現在的重點是提高初始穩定版本的品質，並讓更多人能夠將他們的 Flutter Web 應用程式部署到生產環境。

我們根據 Flutter 季度調查的結果以及我們在問題、面對面討論和社交媒體上聽到的意見來確立這些優先事項。我們剛剛收到了第三季度調查的結果，我們很高興看到這個計畫符合您的回饋。

本文將更詳細地介紹我們的路線圖以及為每個優先事項規劃的工作。某些功能可能跨越幾個季度，而其他功能則需要 [調查 (🔍)] 才能確定解決方案。

WEB 外觀和感覺

Flutter Web 應用程式在 Web 上感覺自然至關重要。這包括諸如捲軸行為、文字功能、啟動畫面、超連結、SEO 和其他 Web 特定的 UI 功能等功能。

RTL 文字

先前，Flutter 為阿拉伯語和希伯來語等從右到左 (RTL) 語言提供了不完整的 Web 支援。雖然框架本身支援 RTL 文字，但 Web 引擎生成了未定義的行為，因為它忽略了 LTR 和 RTL 之間的區別。

最近的穩定版本 (2.5) 加入基本的 RTL 支援，因此所有主要 RTL 語言的使用案例都可以在 Flutter Web 應用程式中支援和使用。大部分與基本支援相關的問題都已解決，我們計畫修復剩餘的問題。

為文字編輯實作 RTL 支援（已修復）
Web 上的 RTL 文字渲染故障（已修復）
具有 TextDirection.rtl 的 TextField，在 Web 上游標位置錯誤（已規劃）
RichText 中的 InlineSpans 在 RTL 應用程式中重疊（已修復）

捲軸行為

雖然 Flutter 2 包含多項改進以支援桌面瀏覽器上的捲軸行為（例如捲軸列支援），但在瀏覽器或執行 Web 應用程式的作業系統上，捲軸行為有時看起來或感覺不對。

雖然其中一些行為取決於 Flutter 桌面支援的工作，但我們計畫在此路線圖中解決一些特定於捲軸物理和捲軸列的問題（如下所列）。我們也計畫調查觸控板支援。

🔍 研究觸控板支援

應用程式載入 API

某些 Web 應用程式在應用程式載入時或提供自訂體驗時，更喜歡顯示啟動畫面、載入指示器或登陸頁面。目前，沒有簡單的方法可以實作自訂體驗或指示 Flutter Web 應用程式正在載入；當使用 CanvasKit 的較大 bundle 大小渲染時，這變得更加重要。

我們在此的工作重點是為您提供應用程式啟動週期的明確 API，該 API 可用於預載應用程式、控制應用程式的載入週期，以及建立啟動畫面或載入指示器。

為 Web 加入啟動畫面支援

無障礙性

無障礙性是我們的首要任務之一；我們的目標是為您提供必要的工具來建立無障礙的 Web 應用程式，這些應用程式可以在最常見的螢幕閱讀器上良好運行。

Flutter 2.2 對無障礙性支援進行了重大改進。從那以後，我們聽到了一些嘗試使用螢幕閱讀器（例如 JAWS）瀏覽 Web 應用程式的最終使用者的意見。

在此路線圖中，我們專注於使用支援的螢幕閱讀器（例如桌面瀏覽器的快顯通知）時出現的問題。我們還將繼續調查改進整體無障礙性支援的方法。

效能

效能是我們始終優先考慮的領域，以改善使用 Flutter Web 應用程式的使用者體驗。目前，我們的重點是改善捲軸卡頓，並加快 Web 應用程式的初始載入速度。

捲軸卡頓

根據我們最近的季度調查，捲軸卡頓是所報告的頂級效能問題之一。我們的目標是確保 Flutter Web 應用程式可以透過行動設備上的手勢或桌面上的滑鼠/鍵盤順暢捲軸，但這也取決於 Web 應用程式期望使用者捲軸瀏覽的內容類型和數量。

在接下來的幾個月裡，我們將主要專注於改善由於圖片解碼引起的卡頓，我們將繼續調查捲軸效能問題，以找出可以改善的其他使用案例。

捆綁 CanvasKit（離線支援）

目前，在 CanvasKit 中渲染的 Flutter Web 應用程式需要額外的步驟才能作為漸進式 Web 應用程式 (PWA) 在離線狀態下運行。為了讓應用程式在離線模式下能直接作為 PWA 完整運行，並確保應用程式符合嚴格的內容安全政策，我們需要捆綁 CanvasKit 和字體備份。

我們將首先捆綁 CanvasKit，然後捆綁字體，最後加入必要的工具以啟用離線模式。

CanvasKit 下載大小

CanvasKit 比基於 DOM 的方法具有更好的效能，因此它是在桌面瀏覽器上的預設渲染器。但是，下載應用程式所需的時間會影響初始載入效能（以及在 Web 上運行的 Flutter 應用程式的 Lighthouse 分數）。

在此路線圖中，我們將調查減少 CanvasKit 下載大小的方法，以改善初始載入效能。我們希望確保最終使用者的設備或瀏覽器不會處理過大的負載。

🔍 改進 CanvasKit 下載大小

🔍 尋找合理大小的 emoji 字體備份

與 HTML 內容整合

能夠與瀏覽器程式碼整合對於利用 Web 平台的優勢至關重要。Flutter Web 應用程式有兩種方式可以與 HTML 整合：1) 在 Flutter Web 應用程式中使用 HTML 平台視圖，或 2) 將 Flutter 作為內容島嵌入到現有的 Web 應用程式中（有點像 Web 的加到應用程式）。雖然前者現在存在，可能需要改進，但後者將是一個需要進一步設計和開發的新功能。

使用自訂元素嵌入（加到應用程式）

目前，將 Flutter Web 應用程式嵌入到現有的網站/Web 應用程式中的唯一方式是透過 iframe。雖然這對某些使用案例有效，但對於那些逐漸遷移 Web 應用程式以使用 Flutter 來說並不總是理想的解決方案。

在此路線圖中，我們將調查和設計自訂解決方案，讓您能夠嵌入 Flutter Web 應用程式，類似於加到應用程式的行動情境。

🔍 將應用程式渲染到自訂元素中

開發者體驗

Flutter 生態系統包括您在開發中使用的功能，但目前缺乏 Web 支援，例如外掛、除錯、熱重載等等。為了讓您在 Web 上擁有良好的開發者體驗，我們將繼續縮減行動和 Web 之間的差異。

相機外掛

自初始穩定版本發佈以來，相機外掛一直是最常被要求的外掛之一；許多人發現，當將 Flutter 行動應用程式移植到 Web 時，這種差異是一個障礙。

在 Flutter 2.5 穩定版本中，我們提供了一個外掛的早期版本，該外掛可以初始化相機、顯示相機預覽並拍照。隨著我們收到回饋，我們將改進此外掛。

為 Web 加入相機支援（已透過部分待審查的 PR 修復）

感謝您！

雖然這是我們目前 Web 路線圖的概述，但我們的 GitHub 問題列表仍然是我們正在進行的工作的真實來源。我們可能會根據我們的學習成果和您的意見來加入、延長或延遲功能。

與往常一樣，我們非常重視您的回饋，並感謝您的支援！

Flutter：Web 上的下一步是什麼？最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。