初期訪問時にPWAのアプリが勝手にリロードされないようにする

やりたいこと

「Give Users Control Over App Updates in Vue CLI 3 PWAs」を参考に実装したPWAの更新ボタンの実装に関して。

「」に上記の記事を参考にした方法を記述した。

だが、初期訪問時（おそらくPWAのキャッシュがないとき）に自動でリロードされてしまっていた。その原因と解決策を書きたい。

解決策

以下が上記の問題を修正したコミット。

原因は、Service Workerの"controllerchange"イベントが初期訪問時にも発火するからみたい。

alert()をリスナーに入れて検証した。console.log()だと自動リロードされて見えなくなるため。

そこで修正後は'skipWaiting'をしたあとに'controllerchange'をイベントリスナーを登録するようにした。

つまり、修正前は常に"controllerchange"イベントを登録していたが更新ボタンを押したときのみにイベントリスナーを登録するように変更した。

より簡素に書く方法とかがあると思うが（this.pwa.refreshingがもしかすると不要かもしれないなど）、論理的にこのイベントリスナーの登録の移動なら、初期訪問時には勝手にリロードされずに、更新ボタンを押したときのみにリロードされることが保証されると思ったためこの変更にした。

簡素に書くには"controllerchange"イベントの発生条件とか、"controllerchange"イベントリスナー内でskipWaitingをトリガーに呼び出されたことを判定出来る方法などの知識が必要そう。