【FlutterWeb】キャッシュを明示的に更新する

前回、Firebase HostingでWebアプリを公開する方法を紹介しましたが、コードを修正してもサイトに反映されないことがあると書きました。今回は、その対処法を紹介します。
もっと良い方法があったら、コメントで教えてください。

原因

FlutterWebはPWAに対応しているため、Service Workerによってリソースがブラウザにキャッシュされます。一度訪れたページはオフラインでも表示できるというメリットがありますが、24時間以内はブラウザキャッシュが優先される仕様なので、開発時にハマるポイントになっています。
明示的にキャッシュを更新すればいいようです。

Service Workerの動作については、こちらが詳しいです。
Service Worker スクリプトのインストールと更新処理

明示的にキャッシュを更新する

onupdatefoundメソッドを使うことで、Service Workerの更新を確認できます。
Service Workerのスクリプトは、Flutterによってビルド時に毎回書き出し直されるので、Service Workerが更新された時はサイトが更新されたとみなして良さそうです。

次のコードでは、Service Workerに更新がある場合は更新を実行して、キャッシュを取得し直します。
flutterのwebフォルダに作成された index.html を下記のように書き換えます。

index.html

  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('flutter-first-frame', function () {
        navigator.serviceWorker.register('flutter_service_worker.js').then(registration => {
          //登録成功
          registration.onupdatefound = function () {
            console.log('Update found');
            registration.update();
          }
        })
          .catch(err => {
            //登録失敗
          });
      });
    }
  </script>

参考

PWAにおけるキャッシュの更新方法