flutter-web

Flutter Web ビルドにコンパイルしたものは、--dart-define の値も含めて、すべて平文でブラウザーに配信されます。安全な方法は、キーを保持し、ユーザーを認証し、モデルを固定し、Responses API の SSE をストリーミングで返す小さなバックエンドプロキシだけです。Flutter 3.44、Dart 3.12、http 1.6 で検証した Dart shelf プロキシと Flutter クライアントの完全なコードを紹介します。

Flutter 3.35 の Web では、dwds のバグによりホットリロードのたびに偽の一時停止が送られていました。Flutter 3.38 以降にアップグレードするか、VS Code を 'Debug my code' に戻してパッケージのフレームをスキップさせてください。

依存関係が Wasm にコンパイルできるなら、flutter build web --wasm で skwasm を出荷しましょう。ダウンロード量が少なく、重いシーンでは CanvasKit より 36% 多くのフレームを描画しました。Flutter 3.47.x では、マルチスレッド時のテキストのクラッシュ修正がベータを抜けるまでシングルスレッドにしておきます。

Flutter web 3.41 から 3.44 では、Android WebView の textZoom が 100 以外のとき、約 625 倍の行の高さのオーバーライドが報告されます。3.47 にアップグレードするか、MaterialApp.builder でオーバーライドを消去してください。

リロードで再検証されるのは index.html だけなので、ハッシュの付かない main.dart.js はブラウザキャッシュから読み込まれ続けます。Flutter のビルド出力には Cache-Control: no-cache を付け、ヘッダーを設定できないホストではビルド ID を埋め込み、3.41 より前のキャッシュは自己削除型の service worker に片付けさせます。

非推奨になった dart:html、dart:js_util、package:js から package:web 1.1.1 と dart:js_interop へ移行する手順です。問題のある import を dart2wasm コンパイラーで洗い出す方法、dart fix がリネームするものとしないもの、JSImmutableListWrapper と innerHTML の落とし穴、そして flutter build web --wasm による検証までを扱います。

Flutter 3.44 で WebAssembly にコンパイルした Flutter Web アプリを公開するための完全ガイドです。出力される 2 つのビルドの中身、ローダーの wasmAllowList が原因で Firefox と Safari が今も JavaScript を受け取る理由、dart2wasm のための dart:html からの移行、skwasm がマルチスレッドで動くかを決める COOP/COEP ヘッダー、そしてブラウザーが実際にどちらのビルドを読み込んだかをランタイムで確認する方法を扱います。