Flutter Webでの{{flutter_service_worker_version}}テンプレート適用方法
問題の概要
Flutter Webアプリの開発中に、index.html内のサービスワーカー関連コードで以下の警告が発生:Local variable for "serviceWorkerVersion" is deprecated. Use "{{flutter_service_worker_version}}" template token instead
この警告は、古いプロジェクトを新しいFlutterバージョン（例：3.22以降）でビルドした際に発生します。非推奨になったserviceWorkerVersion変数を、{{flutter_service_worker_version}}テンプレートトークンで置き換える必要があります。
適切な解決方法
方法1: webディレクトリの再生成（推奨）
最も確実かつ最新の構成を得る方法:
bash
# 手順
rm -rf web # 既存のwebディレクトリ削除
flutter create . --platforms=web # 新しいwebディレクトリを再生成注意点:
- カスタマイズされた内容がある場合は事前にバックアップ
base_hrefやマニフェスト設定は再設定が必要
方法2: index.htmlの直接修正
webディレクトリの再作成が難しい場合の修正方法:
html
<!-- 修正前 -->
<script>
var serviceWorkerVersion = null; // 非推奨
</script>
<!-- 修正後 -->
<script>
var serviceWorkerVersion = '{{flutter_service_worker_version}}'; // テンプレートを使用
</script>最新のindex.html構成例
Flutter 3.22+ の推奨構成:
html
<!DOCTYPE html>
<html>
<head>
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<!-- メタデータやスタイル -->
<!-- サービスワーカー設定 -->
<script>
var serviceWorkerVersion = '{{flutter_service_worker_version}}';
</script>
</head>
<body>
<!-- アプリケーション本体 -->
<script src="flutter_bootstrap.js" async></script>
</body>
</html>重要な補足情報
flutter_bootstrap.jsの役割
- フレームワークが生成するランタイムスクリプト
- サービスワーカーの登録と管理を自動化
- 手動で変更してはいけません
- ビルド時に自動生成され、
{{...}}トークンはこの時点で解決
ベストプラクティス
- カスタム初期化が必要な場合は公式ドキュメントの初期化APIを使用
_flutter.loader.load()メソッドで細かい制御が可能- ローディングインジケーターとの連携例:
js
_flutter.loader.load({
onEntrypointLoaded: async (engineInitializer) => {
const appRunner = await engineInitializer.initializeEngine();
await appRunner.runApp();
// ローディングインジケーターを非表示に
document.getElementById('loading').remove();
}
});トラブルシューティング
flutter_bootstrap.js not foundエラー:bashflutter clean # キャッシュ削除 flutter pub get # 依存関係再取得テンプレートトークンが解決されない:
flutter build webで本番ビルドを実行- 開発モードではテンプレートが完全に解決されない場合あり
更新後も警告が出る場合:
bashflutter upgrade # Flutterの最新版に更新
根本原因と背景
この変更はFlutter 3.22での新しい初期化プロセスの導入が原因です:
古い流れ:
index.html → main.dart.js直接ロード
新しい流れ:
index.html → flutter_bootstrap.js → 最適化された初期化flutter_bootstrap.jsがビルド時に自動生成され、サービスワーカーのバージョン管理やWASMのロードなど高度な最適化を担当します。