VueアプリケーションのVersion管理（キャッシュ対策）

 VueでSPAアプリケーションをつくってWebに公開すると、はじめから予想されたことだが、ブラウザにキャッシュされるので、サーバにおくアプリケーションのバージョンをあげても、ローカルの古いバージョンのまま使用するユーザーが発生する。

やはり、最初にサーバから現在のバージョン番号を取得して、自分自身（ローカル）のバージョンと異なったらリロードしてもらうのがいいだろう。

自分自身のバージョンは、package.jsonのversionを利用することにしよう。

import { version } from '../../package.json'

なお、上記で以下のエラーが出る場合は、

Cannot find module '../../package.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.Vetur(2732)

tsconfig.jsonに、以下を追加する。

"compilerOptions": {

↓↓

  "resolveJsonModule": true,

↑↑

アプリケーションが表示されたら、最初にサーバにアクセスしてバージョン番号を取得し、自分自身のバージョンと比較して異なる場合は、以下のようにリロードする。

location.reload()

リロードした結果、サーバとローカルのバージョンが一致すれば「更新しました」、一致しなければ「更新できませんでした」のようなメッセージをそれぞれ表示させる。

くれぐれも、一致するまでリロードが無限ループしないように注意。

当該処理が、リロード後であることを判断する方法は、いろいろあるようだが、検証が面倒なので、今回はsessionStorageを使った。

location.reload(true)がdeplicatedになって、location.reload()だとキャッシュ読んじゃうんじゃないかと心配したが、ちゃんと更新してくれたのでとりあえず、深入りしないことにしよう。