SPAにおけるアプリ更新方法について

Question

SPAにおけるアプリ更新方法について

AngularJSでSPAアプリを作成しています。jsは一纏まりにしてapp.min.js?12541874のような形にまとめて最初に読み込まれるindex.htmlファイルに<script>タグから読みこんでいます。?の後の数字はapp.min.jsが更新される度に変更されるようになっています。

アプリに更新があった場合にapp.min.jsをユーザーに再度読み込ませるにはどのようにすればよいのでしょうか？

Comments

[keisukeh]

今の状態で実現出来ていると思うのですが。

[tama2015]

初回アクセス時にindex.htmlにアクセスした後からはapiから情報取得して画面更新します。ユーザーは古いapp.min.jsを使い続けますのでどうやってapp.min.jsを更新するのが適切なのかが知りたいです。

Answer 1

僕もこの点苦労しました。

結論としては、pollingを使いました。

• サーバー側に最新バージョンの数値を保持し、「現在のバージョンが最新かどうか」を判定するAPIを実装
• フロント側からは1h毎にタイマーで上記APIを叩く。結果、古いバージョンとなっていた場合はハードリフレッシュを行う

ということをしました。
実際には、ユーザー入力中にハードリフレッシュを行わないように、windowがactiveじゃなくなったタイミングを検知してハードリフレッシュする、というところまでやっています。

もう少し、シンプルな実装ができればとおもっていたのですが、このソリューションしか見つけられなかったです。

Answer 2

なるほど。更新した際にユーザーがページを開いてる場合ですね。
自分の場合ですが、service workerを使用してアプリの更新情報を取得して
新しいバージョンがある場合、
「新しいバージョンがあります。リロードしますよ～」みたいなダイアログを出します。
service workerで無くてもDBでバージョン管理して定期的に取得して更新を確認してもいいと思います。

【追記】
大規模なアプリの場合アップデートのタイミングで強制的にメンテナンス画面に飛ぶような仕組みを用意しておいたほうがいいかもしれません。