(フロントエンド初心者)AngularのPWA少しずつちゃんとやる。デプロイしたら端末側は最新状態に画面をアップデートしたい(Todoistみたいに)

PWA簡単にできますよっていうQiitaの記事はみましたが、本当かな。
PWAが一度有効になるとServiceWorkerから情報取るのでデプロイで新しいソースが来ても端末側で更新できない問題がすぐに見つかる。みんなど
うしてんの？
Todoistとかはこの辺うまくやっててすごいなぁと思う。
公式ドキュメントは日本語よみにくいことこの上ないので読めない。

この辺の情報は日本語でググっても情報なかったので私がググった結果のリンクをおいておきます

結論

下記を実装しましょう
https://medium.com/@arjenbrandenburgh/angulars-pwa-swpush-and-swupdate-15a7e5c154ac 記事のGithub

• https://github.com/arjenbrandenburgh/medium-pwa-example/pull/3/files#diff-465e9f13ce23ec4a1e366935273fdbb6R8-R10

と、updateがうまく行かないので下記を

• https://stackoverflow.com/questions/50968902/angular-service-worker-swupdate-available-not-triggered/50969084#50969084

実装しましょう。

動作確認

• Chrome
• iPhoneでホーム画面に追加した画面

動作確認できました。Edgeとか知らん。Firefoxはしらん。

このあと試したいこと

オフライン <=> オンラインを行き来してうまく端末が追従するか →できたっぽい。

追記

下記シナリオで端末が最新に更新できることを確認しました。

1. 6秒おきにサーバーに確認するようにプログラム(記事は6時間)
2. iPhoneのホーム画面に設置したAngularをオンラインで表示
3. iPhoneを機内モード(オフライン)
4. Angular(FirebaseのHosting)をちょっとだけ更新してデプロイ
5. iPhoneの機内モード解除(オンライン)
6. しばらくしたらiPhoneにて更新がかかる

良い感じ