建立和發布為 Web 應用

建立用於發布的應用
Deploying to the web
Deploying to Firebase Hosting
- Before you begin
- Initialize Firebase
Handling images on the web
Choosing a web renderer
Minification
將 Flutter 應用內嵌到一個 HTML 頁面裡
- 使用 hostElement
- Iframe
PWA Support

（例如）在典型的開發過程中，你可以在指令行使用 flutter run -d chrome 指令測試應用程式。這會建立出 debug 版本的應用。

本頁面會幫助你建立 release 版本的應用，其囊括瞭如下主題：

建立正式版本的應用
部署應用到 Web
部署到 Firebase 主機
處理 Web 中的圖片
選擇 Web 渲染器
壓縮

建立用於發布的應用

使用 flutter build web 指令建立應用程式以進行部署。你也可以透過使用 --web-renderer 自行選擇渲染方式。（請檢視網頁渲染器）這將生成包括資源的應用程式，並將檔案放入專案的 /build/web 目錄中。

一般的應用程式的 release 版本具有以下結構：

/build/web
  assets
    AssetManifest.json
    FontManifest.json
    NOTICES
    fonts
      MaterialIcons-Regular.ttf
      <other font files>
    <image files>
    packages
      cupertino_icons
        assets
          CupertinoIcons.ttf
    shaders
      ink_sparkle.frag
  canvaskit
    canvaskit.js
    canvaskit.wasm
    profiling
      canvaskit.js
      canvaskit.wasm
  favicon.png
  flutter.js
  flutter_service_worker.js
  index.html
  main.dart.js
  manifest.json
  version.json

啟動 Web 伺服器（例如，python -m SimpleHTTPServer 8000，或使用 dhttpd package），然後開啟 /build/web 目錄。在瀏覽器中訪問 localhost:8000（前文用 Python 啟動的伺服器）以檢視應用程式的 release 版本。

Deploying to the web

When you are ready to deploy your app, upload the release bundle to Firebase, the cloud, or a similar service. Here are a few possibilities, but there are many others:

Deploying to Firebase Hosting

You can use the Firebase CLI to build and release your Flutter app with Firebase Hosting.

Before you begin

To get started, install or update the Firebase CLI:

npm install -g firebase-tools

Initialize Firebase

Enable the web frameworks preview to the Firebase framework-aware CLI:
```
 firebase experiments:enable webframeworks
```
In an empty directory or an existing Flutter project, run the initialization command:
```
 firebase init hosting
```
Answer yes when asked if you want to use a web framework.
If you’re in an empty directory, you’ll be asked to choose your web framework. Choose Flutter Web.
Choose your hosting source directory; this could be an existing flutter app.
Select a region to host your files.
Choose whether to set up automatic builds and deploys with GitHub.
Deploy the app to Firebase Hosting:
```
 firebase deploy
```
Running this command automatically runs flutter build web --release, so you don’t have to build your app in a separate step.

To learn more, visit the official Firebase Hosting documentation for Flutter on the web.

Handling images on the web

The web supports the standard Image widget to display images. By design, web browsers run untrusted code without harming the host computer. This limits what you can do with images compared to mobile and desktop platforms.

For more information, see Displaying images on the web.

Choosing a web renderer

By default, the flutter build and flutter run commands use the auto choice for the web renderer. This means that your app runs with the HTML renderer on mobile browsers and CanvasKit on desktop browsers. We recommend this combination to optimize for the characteristics of each platform.

For more information, see Web renderers.

Minification

Minification is handled for you when you create a release build.

Type of web app build	Code minified?	Tree shaking performed?
debug	No	No
profile	No	Yes
release	Yes	Yes

將 Flutter 應用內嵌到一個 HTML 頁面裡

使用 `hostElement`

** 在 Flutter 3.10 中新增**
你可以使用 flutter.js 和 hostElement 引擎初始化引數將 Flutter Web 應用嵌入到 Web 頁面的任何 HTML 元素中。

要告訴 Flutter Web 在哪個元素中呈現，請使用 initializeEngine 函式的 hostElement 引數：

<html>
  <head>
    <!-- ... -->
    <script src="flutter.js" defer></script>
  </head>
  <body>

    <!-- Ensure your flutter target is present on the page... -->
    <div id="flutter_host">Loading...</div>

    <script>
      window.addEventListener("load", function (ev) {
        _flutter.loader.loadEntrypoint({
          onEntrypointLoaded: async function(engineInitializer) {
            let appRunner = await engineInitializer.initializeEngine({
              // Pass a reference to "div#flutter_host" into the Flutter engine.
              hostElement: document.querySelector("#flutter_host")
            });
            await appRunner.runApp();
          }
        });
      });
    </script>
  </body>
</html>

要了解更多，請檢視自定義 Web 應用的初始化。

Iframe

你可以使用 iframe 標籤將 Flutter web 應用內嵌到一個網頁裡。請參照下面的例子，將 URL 替換成實際的地址：

<iframe src="URL"></iframe>

PWA Support

從 1.20 版開始，用於 Web 應用程式的 Flutter 樣板包括了對可安裝且具有離線功能的 PWA 應用程式所需的核心功能的支援。基於 Flutter 的 PWA 的安裝方式與其他基於 Web 的 PWA 基本相同；由 manifest.json 提供的設定訊息可以宣告你的 Flutter 應用程式是 PWA，該檔案可以在 web 目錄中使用 Flutter create 指令生成。

對 PWA 的支援仍在進行中，因此，如果你發現不正確的地方，歡迎給予我們反饋。