flutter-web

Alles, was Sie in einen Flutter-Web-Build kompilieren, auch --dart-define-Werte, landet im Klartext im Browser. Das einzige sichere Muster ist ein kleiner Backend-Proxy, der den Schlüssel hält, den Benutzer authentifiziert, das Modell festlegt und die SSE der Responses API zurückstreamt. Vollständiger Dart-shelf-Proxy und Flutter-Client, getestet mit Flutter 3.44, Dart 3.12 und http 1.6.

Ein dwds-Bug in Flutter 3.35 für das Web meldete bei jedem Hot Reload eine falsche Pause. Aktualisieren Sie auf Flutter 3.38+ oder stellen Sie VS Code wieder auf 'Debug my code' um, damit Paket-Frames übersprungen werden.

Liefern Sie skwasm mit flutter build web --wasm aus, wenn Ihre Abhängigkeiten nach Wasm kompilieren: Der Download ist kleiner, und bei einer aufwendigen Szene wurden 36 % mehr Frames gerendert als mit CanvasKit. Bleiben Sie auf Flutter 3.47.x beim Single-Threaded-Modus, bis der Fix für den Multi-Threaded-Absturz bei Text die Beta verlässt.

Flutter web 3.41 bis 3.44 meldet eine Zeilenhöhen-Überschreibung von etwa 625x, wenn der textZoom eines Android WebView nicht 100 ist. Aktualisieren Sie auf 3.47 oder entfernen Sie die Überschreibung in MaterialApp.builder.

Ein Reload validiert nur index.html neu, daher kommt ein main.dart.js ohne Hash im Dateinamen weiter aus dem Browser-Cache. Senden Sie Cache-Control: no-cache für die Flutter-Build-Ausgabe, versehen Sie die Dateien mit einer Build-ID, wo Sie keine Header setzen können, und lassen Sie den selbstbereinigenden Service Worker die Caches aus der Zeit vor 3.41 abräumen.

Eine schrittweise Migration weg von den veralteten dart:html, dart:js_util und package:js hin zu package:web 1.1.1 und dart:js_interop: wie Sie jeden problematischen Import mit dem dart2wasm-Compiler finden, was dart fix umbenennt und was nicht, die Fallstricke von JSImmutableListWrapper und innerHTML, und wie Sie mit flutter build web --wasm verifizieren.

Vollständige Anleitung zum Ausliefern einer nach WebAssembly kompilierten Flutter-Web-App unter Flutter 3.44: wie die beiden erzeugten Builds aussehen, warum Firefox und Safari wegen der wasmAllowList des Loaders weiterhin JavaScript erhalten, die Migration von dart:html zu dart2wasm, die COOP/COEP-Header, die entscheiden, ob skwasm mit mehreren Threads läuft, und wie Sie zur Laufzeit nachweisen, welchen Build der Browser tatsächlich geladen hat.