PWAを適用することで、WebアプリケーションでネイティブアプリのようなUI/UXを実現できます。その一つとしてService Workerが挙げられます。Service Workerはクライアントサイドにキャッシュされ、アクセス時に差分があると更新される仕組みです。 しかし、更新はされるのですが、その場では適用されません。その場はキャッシュされているものが利用され、次回から新しいものに変わります。そこで使いたいのがアップデートを通知するPWA Update Availableです。

PWA Update Availableの使い方

WebサイトにアクセスするとService Workerの新バージョンがある旨通知されます。

もう一度アクセスすると表示されなくなります。

Service Workerには元々更新されている場合に実行されるイベントがあります。それを使うことで新しいService Workerがあるかどうかはキャッチできます。PWA Update Availableはさらに通知を出して、再読込を促せるようになっています。PWAを運用する上で学びたいテクニックと言えるでしょう。

PWA Update AvailableはJavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

deanhume/pwa-update-available: Service Workers - New Update Available sample