1. はじめに

タイトルにもあるとおり、FlutterWeb（じゃなくてもいいけど）で開発しながらFirebaseHostingでデプロイしたときに内容が反映されないことがあります。調べてみるとブラウザのキャッシュを読んでしまい最新版を引っ張ってくることができないとのこと。

解決法を検索してみると、スーパーリロードとやらをすることでブラウザのキャッシュをクリアすると最新版をサーバーから引っ張ってくることができるそうです。
ただ、これは開発者目線であり、ユーザにスーパーリロードを求めるのは少し難しいかと思います。

また、バージョンが最新じゃないアプリケーションを使ったユーザによってバグが発生してしまう可能性を考えると、全てのユーザに最新バージョンで使ってもらいたいと考えるのが普通なのではないでしょうか。
(古いバージョンのユーザがいてもバグが起きないように設計しろと言われればそれまでですが、なかなか難しい。)

そこで最新版をアップロードした際に、ブラウザのキャッシュを無視して最新版を引っ張ってくることをこの記事の目標とします。
また、この記事は紆余曲折を書き連ねているため、まず結論からお読みいただくことをお勧めします。

2. 試行錯誤1

まず参考にした記事
https://qiita.com/fukusin/items/51b1f98fde15f7994a12
https://tech.playground.style/javascript/cra-cache/

上記の記事を参考に色々試しましたが、いけそうで上手くいかない。。。

3. 試行錯誤2

次にjavascriptのコードでlocation.reload(true)とすることで最新版をサーバから引っ張ってくることができるとの情報を手に入れたので試してみるが、safariでは上手くいくもののchromeでは上手くいかない。少し情報が古いのでなんとも言えないが、下の記事を見るにchromeは対応していないのかもしれない。。。
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12176544187

4. 試行錯誤3

次に参考にしたのがこちらの内容です。
https://www.reddit.com/r/flutterhelp/comments/m02olu/how_to_force_hardreload_on_flutter_web_after/

要するにindex.htmlを編集するといいとのこと。ただし、index.htmlは二つありソースとビルド後の生成物？がある。
その両方を編集する必要がある。この方法でうまくいったのだが、ここで問題が発生。
自分が携わっているプロジェクトではGitHubActionsでプルリクのマージをトリガーにデプロイを自動化している。
GithubActionsにビルドとデプロイを任せているため、ビルド後にビルド後のindex.htmlを編集するのは少しめんどくさい。。。

と思っていたのですが、ここで色々調べたり考えたりした結果、重要なのはindex.htmlに記述されているmain.dart.jsのソースURLをアップデートのたびに少し変えることだと気づいた。
上記の記事ではビルド時にflutter_service_worker.jsに割り振られる文字列をmain.dart.jsのソールURLに追記することで変えているが、ここに追記する文字列はなんでもよさそうであり、ビルド前のindex.htmlに記載するだけでよさそうだと考えた。

5. 結論

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

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

下の1行のように変更することでキャッシュを無視して最新バージョンを引っ張ってくることができる。

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

v=○.◯.◯はアプリのバージョンに合わせて運用していけばよさそう。

なぜこれでキャッシュを無視できるのかは下の記事を読んだらわかりそう。
https://taishon.nagoya/browser-cache-delete/

上記のやり方で、デプロイ後の最新バージョンを引っ張ってくることができました。(ただし、普通のリロードをしないといけないかも。)

何かご指摘があればよろしくお願いします。

1. はじめに

目次

2. 試行錯誤1

3. 試行錯誤2

4. 試行錯誤3

5. 結論