【文章內容使用 Gemini 1.5 Pro 自動產生】
從同一個程式碼庫發佈到網路和行動裝置
我們對 Flutter 的願景是成為一個可移植的 UI 框架，用於在任何平台上建立精美的應用程式體驗。今天，作為 Flutter 2 的一部分，我們宣佈 Flutter 的網路支援已達到穩定里程碑。
第一個 Flutter 版本支援 iOS 和 Android，並且已被用於將超過 150,000 個應用程式帶到行動應用商店。現在，新增網路支援意味著這些相同的應用程式可以接觸到更廣泛的觀眾，並打開新的方式在網路上建立互動式體驗。
在此網路支援的初始版本中，我們專注於三個應用程式場景：
- 漸進式網路應用程式 (PWA) 結合了網路的覆蓋範圍和桌面應用程式功能。
- 單頁應用程式 (SPA) 僅載入一次，並與網際網路服務傳輸資料。
- 將現有的 Flutter 行動應用程式擴展到網路，使兩者共用程式碼。
本文描述了我們到目前為止所建立的內容，並探討了一些例子，說明您如何在自己的應用程式中利用 Flutter 的網路支援。
我們邁向網路的旅程
當今的網路平台比以往都更加豐富，擁有 硬體加速的 2D 和 3D 圖形、[離線和安裝支援] (https://web.dev/progressive-web-apps/)，以及 存取底層作業系統和硬體。網路允許 廣泛的 陣列 的 框架 建立在這個底層平台之上，為開發人員提供很大的彈性，讓他們可以選擇如何為網路建立應用程式。
由於 Flutter 是用 Dart 編寫的，而 Dart 是一種提供 JavaScript 編譯的語言，因此探索網路作為目標是自然而然的一步。這也符合我們提供一個可移植框架的願景，讓您可以在任何想要繪製像素的地方建立精美的 UI。
我們的方法是建立一個一致的工具組，可以在所有平台上運行（而不是擁有兩個具有微妙行為偏差的獨立框架），以確保您的程式碼在運行時不會出現意外情況。
在架構層面上，Flutter 是一个 多層系統，具有：
- 框架，提供對通用慣用語的抽象，例如 Widget、動畫和手勢。
- 引擎，使用它公開的系統 API 渲染到目標設備。
框架本身是用 Dart 編寫的，大約 700,000 行核心 Flutter 框架程式碼在所有平台上都相同：行動裝置、桌面，以及現在的網路。您的程式碼也是如此；我們使用 Dart 開發編譯器 ( dartdevc ) 或 Dart 部署編譯器 ( dart2js ) 將您的程式碼編譯成 JavaScript，然後可以將其託管在伺服器上。
有了 Dart 將 Flutter 框架（以及您的應用程式程式碼）編譯成 JavaScript 的能力，我們支援網路的工作涉及用對映到網路平台 API 的程式碼替換行動應用程式使用的低階 C++ 渲染引擎。Flutter 並不是簡單地將其 Widget 轉換成 HTML 對應物。相反，Flutter 的網路引擎提供兩種渲染器的選擇：一個針對大小和廣泛相容性進行優化的 HTML 渲染器，以及一個使用 WebAssembly 和 WebGL 將 Skia 繪製命令渲染到瀏覽器畫布的 CanvasKit 渲染器。
我們對 Flutter 的目標是提供一種新的方式來定位網路平台，建立在現有基礎的基礎上，並提供新的見解來改善每個人的網路體驗。
發佈生產品質的穩定版本
自從一年前我們的 網路支援的測試版發佈 後，我們學到了很多關於早期使用者如何使用它的知識，並且與一些客戶合作，他們現在已將其 Flutter 網路應用程式發佈到生產環境。
在此期間，我們進行了主要的架構改進，並新增了功能來擴展和優化 Flutter 的網路支援，重點關注四個領域：效能、特定於網路的功能、桌面尺寸 和 外掛。
效能
自我們早期版本以來，效能是最大的改進領域。在開發過程中，我們更好地了解了網路平台上可用的各種渲染技術的效能和正確性特徵。
我們最初開始使用基於 HTML、DOM 的模型。在此模型中，Flutter 的網路引擎將每個產生的 Flutter 場景轉換成 HTML、CSS 或 Canvas，並將一個圖形渲染到頁面上，形成一個 HTML 元素樹。儘管 HTML 渲染器提供了與各種瀏覽器最大的相容性，並且程式碼大小更小，但 HTML 渲染器的重新繪製效能不太適合更注重圖形的應用程式，例如 Rive，一個使用 Flutter 建立的協作工具，用於建立動態圖形。
為了處理高效能地渲染密集圖形所需的保真度，我們開始嘗試使用 CanvasKit，它可以使用 WebAssembly 和 WebGL 在瀏覽器中渲染 Skia 繪製命令。我們發現 CanvasKit 可以提供卓越的效能、保真度和正確性，實現了 Felix Blaschke（Flutter 社群中一位才華橫溢的成員）在 這個演示 中體現的圖形處理能力。
每個渲染器在不同的場景中都具有優勢，因此 Flutter 支援兩種渲染模式：
- HTML 渲染器： 使用 HTML 元素、CSS、Canvas 元素和 SVG 元素的組合。此渲染器具有較小的下載大小。
- CanvasKit 渲染器： 此渲染器與 Flutter 行動裝置和桌面完全一致，具有更高的 Widget 密度，但下載大小增加了約 2MB。
為了針對每個設備的特點優化您的 Flutter 網路應用程式，渲染模式預設設置為自動。這意味著您的應用程式在行動瀏覽器上使用 HTML 渲染器，在桌面瀏覽器上使用 CanvasKit 渲染器。
您也可以使用 –web-renderer html 或 –web-renderer canvaskit 明確選擇您的應用程式使用的渲染器。如需更多資訊，請參閱 網路渲染器。
特定於網路的功能
在瀏覽器中運行的 Flutter 應用程式應感覺像一個網路應用程式。因此，我們在 Flutter 中新增了一些功能，可以幫助您充分利用網路。
網路具有許多優勢，尤其是其全球覆蓋範圍。將現有的 Flutter 應用程式帶到網路上的眾多原因之一是接觸到應用程式商店之外的使用者。為此，我們新增了對 自訂 URL 策略 的支援，以確保您的使用者只需點擊一個 URL 即可在任何地方訪問到您的應用程式。使用此功能，您可以控制地址欄中顯示的 URL，以及您的應用程式在網路上的路由。
超連結也是使用者在網路上導航方式的關鍵。url_launcher 套件中的一個新的連結 Widget 使使用者能夠深度連結到您的應用程式中的錨點或外部網站。您可以在相關的 Widget 上使用連結，包括按鈕、內嵌文字、圖片，並指定連結是在同一個標籤頁中打開還是新標籤頁中打開。
任何應用程式的另一個重要部分是文字渲染。為文字開發佈局系統是支援 Flutter 在網路上的最大挑戰之一。由於網路缺乏直接文字佈局 API，因此 Flutter 必須透過觸發 layout() 對 段落 進行各種測量。這些測量可能會非常昂貴，因此新的 基於畫布的文字測量 為純文字和富文字添加了支援。現在，Flutter 可以高效地在網路上進行詳細的測量，從而實現一些功能，例如在選定的文字上準確地繪製突出顯示框。
與文字互動與能夠快速準確地渲染文字一樣重要。現在可以使用 SelectableText 和 EditableText Widget 選擇、複製和貼上文字。此外，表單文字欄位支援 自動填充，允許瀏覽器儲存資料並處理未來自動填充的案例。
Flutter 2 特别适合实现渐进式网络应用程序 (PWA)。透過 Chrome 的 Project Fugu 的努力，PWA 可以很好地填補行動裝置和網路應用程式之間的差距，以安全可靠的方式。
當您建立 Flutter 網路應用程式時，我們會包含一個 PWA 網路清單檔案，以及用於設置服務工作者的程式碼。清單檔案 提供有關應用程式如何運行的中繼資料，包括圖示和應用程式標題等資訊。服務工作者 可以啟用資源的快取和離線運行應用程式。當您在瀏覽器中作為 PWA 運行 Flutter 應用程式時，您將看到有機會將其安裝到您的設備上，無論是作為行動裝置應用程式還是桌面應用程式。
對桌面尺寸的支援
我們希望讓 Flutter 網路體驗感覺正確，無論您的瀏覽器視窗的形狀和大小如何。在行動瀏覽器上，Flutter 應用程式已經對從行動應用程式支援繼承的手勢和捲軸物理特性提供了出色的支援。但是，桌面瀏覽器提供了不同的 UI 功能，因此我們對 Flutter 進行了相應的更新。
例如，人們期望桌面上的內容顯示可以使用滑鼠或鍵盤控制的捲軸條。因此，新的 可自訂的互動式捲軸條 支援 主題、軌道，以及透過拖動滑塊進行捲軸的功能。PrimaryScrollController 已擴展，因此您可以使用 鍵盤快捷鍵進行捲軸，而無需連接自己的捲軸視圖。
我們還提高了 預設內容密度，因為滑鼠指標比觸控設備支援更高的密度。我們在框架中新增了一組 系統滑鼠游標，以支援所有平台。
最後，為了支援 所有 使用者，Flutter 的網路語義功能已擴展以支援 Windows、macOS 和 ChromeOS 的無障礙功能。在網路上，會並發產生一個名為 SemanticsNode 樹的第二個 DOM 樹，與 RenderObject DOM 樹並行。SemanticsNode 樹將標誌、動作、標籤和其他語義屬性轉換成 ARIA 屬性。現在，您可以使用 Narrator、VoiceOver、TalkBack 或 ChromeVox 螢幕閱讀器來導航 Flutter 網路應用程式。
外掛生態系統
最後，網路支援已新增到一些最常用的外掛中，使您能夠將現有的 Flutter 應用程式帶到網路上。Flutter 外掛 允許您的程式碼與您正在運行的平台的原生函式庫互動。當您在網路上運行 Flutter 應用程式時，您可以透過外掛存取現有的 JavaScript 函式庫。
自測試版發佈以來，並在社群的幫助下，新增了對以下外掛的支援：
- image_picker
- google_maps
- firebase_analytics
- firebase_storage
- experimental_connectivity_web
- cloud_firestore
- cloud_functions
- cross_file
展望未來
幾年前，不可能以可接受的品質和效能來提供 Flutter 在網路上運行。但是，新網路技術的引入和平台的持續進步使我們能夠充分發揮底層設備的潛力。有了對網路的支援，Flutter 涵蓋了網際網路上的所有設備，並在所有現代瀏覽器和設備上提供一致的體驗。
此版本的許多定義來自早期網路採用者的回饋，以及社群提交的議題。由衷地感謝你們！展望未來，我們的首要目標是解決您的回饋並快速解決問題，讓您能夠專注於在 所有 目標平台上發佈高品質的 Flutter 應用程式。
效能可能會一直是投資領域。我們的目標是減少程式碼大小，提高每秒畫面數 (fps)。今天，每個 Flutter 網路應用程式都會下載它需要的引擎程式碼。我們正在探索快取部分邏輯的可能性，以減少啟動時間和下載大小。我們最近在 Flutter 圖庫演示應用程式中做了些工作，透過延遲載入函式庫來減少程式碼大小，並計畫很快分享我們的經驗。
我們還將在接下來的幾個月中繼續改進一些領域：
- 雖然 CanvasKit 已經穩定，但還有一些邊緣情況沒有涵蓋，例如 特殊字元的字體備用 或適當支援 跨來源資源共享 (CORS) 圖片。
- PWA 目前 快取一部分資源，因此我們的完整離線支援仍然需要 對 CanvasKit 做額外的手動步驟。
- 文字渲染和功能（例如選擇高度樣式的文字）仍然是我们將繼續努力改进的最複雜的功能之一。
- 我們還將繼續投資於外掛生態系统，讓 Google 發佈的套件在行動裝置和網路上的功能更加一致。
開始使用 Flutter 在網路上運行
有了 Dart 的可移植性、網路平台的强大功能以及 Flutter 框架的靈活性，您現在可以從同一個程式碼庫為 iOS、Android 和瀏覽器建立應用程式。
對於那些已經擁有現有 Flutter 網路應用程式的使用者，您現在可以在 stable channel 中建立您的應用程式。如果您是 Flutter 網路應用程式開發的新手，請查看 flutter.dev/web、我們的 入門 codelab 以及 Flutter Engage 的 網路分組會議。在您建立網路應用程式時，請務必在 GitHub 上提交任何議題。
我們迫不及待想要看到您使用 Flutter 的新網路支援建立什麼！
Flutter 網路支援達到穩定里程碑 最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。