Flutter Webでキャッシュを消す方法【Cache Busting】

Flutter Webで開発していると、更新してデプロイしているのに反映されないということがあります。

これは、前回のキャッシュが残っているからで、Chromeだと「Cmd + Shift + R」のスーパーリロードをすると消えます。

ただ、ユーザーにそれをお願いすることは現実的じゃないので、エンジニアとしてできる方法を紹介します。

man.dart.jsにクエリパラメータをつけましょう

Flutterプロジェクトの/web/index.htmlにある下の1行を

<script src="main.dart.js" type="application/javascript"></script>

以下みたいにパラメータとしてバージョンをつけたものに変更します。パラメータは変化すればなんでもいいんですが、運用上やりやすいのはバージョンを刻むことかなと思います。

<script src="main.dart.js?v=1.3.3" type="application/javascript"></script>

もともとミヤジックくんが一緒にCodeBoyを開発している時に調査してくれて出た結論です。

https://qiita.com/Miyaji555/items/38b8fc1a740f0a48973b

これをCache Bustingというらしい！カッコ良すぎかよ！

ただ、これで絶対キャッシュが消えるとは限らないです。何か課題等あればコメントで教えてください！

Cache Bustingの参考文献

https://taishon.nagoya/browser-cache-delete/

https://tech-blog.rakus.co.jp/entry/20190816/query-parameters/cache