SPAはとてもすてきだけど、Hostingにアップロードしてもすぐに更新されない。。
たとえば、メンテナンス画面に変更しても、キャッシュが残っててメンテナンスモードにならないとか。。
この記事をみると、Reactで強制的にリビジョンアップする方法が載っていたので、
Nuxt.jsでもできないかやってみたときの備忘録。
追記 2018/10/17
@hecateballさんの記事によると、あまりよくない方法のよう。。
PWAでキャッシュ戦略を設定するか、Remote Configがよさそう(´ω｀)
ざっくりとした流れ
流れとしては、こんな感じ。
- staticディレクトリにJSONファイルでバージョン番号を用意
- 環境変数にリビジョン番号を保持するように設定
- JSONファイルと環境変数のバージョン番号が異なっていたら、強制リロードする
用意するJSONファイルはこんな感じ
{"version":1}
やりかた
バージョンチェックするタイミングや更新の契機はいろいろあるけど、
ページ遷移時にチェックするよう、middlewareで対応。
参考記事)にあるような、ダイアログを出すパターンもある。
バージョンをチェックするmiddlewareを用意
middleware/checkUpdate.tsとして、バージョンをチェックするミドルウェアを追加する。
import axios from "axios";
export default async function() {
try {
// revision.jsonファイルから最新のバージョンを取得
const res = await axios.get("/version.json");
const data = res.data;
const latestVersion = data.version;
// 環境変数から現在のバージョンを取得
const curVersion = !!process.env.VERSION ? Number(process.env.VERSION) : 0;
// 最新バージョンよりも古かったら、強制的にリロードする
if (curVersion < latestVersion) location.reload(true);
} catch(error) {
console.error(error);
// エラーのときはなにもしない
}
}
location.reload(true)を使うとキャッシュを無視して、強制的にリロードするらしい
・参考: Location.reload() - Web APIs | MDN
nuxt.config.tsの設定
middlewareを使うようにするのとあわせて、
- 環境変数(
VERSION)の設定したり、 - JSONファイル(
version.json)を生成する
import fs from "fs";
import NuxtConfiguration from "@nuxt/config";
// バージョン番号を設定
const VERSION = 1;
// revision.jsonをstatic配下に生成
fs.writeFileSync("static/version.json", JSON.stringify({ version: VERSION }));
const config: NuxtConfiguration = {
env: {
VERSION: VERSION // 環境変数にバージョンを設定
},
router: {
middleware: ["checkUpdate"] // バージョンチェックのmiddlewareを設定
}
}
firebase.jsonでversion.jsonをキャッシュしないように
そのままだと、version.json自体もキャッシュされてしまうので、
あまり意味がない感じになる。。
なので、firebase.jsonでversion.jsonをキャッシュしないように設定
{
"hosting": {
"public": "public",
"ignore": ["firebase.json", "**/node_modules/**", "**/README.md"],
"headers": [
{
"source": "/version.json",
"headers": [
{
"key": "Cache-Control",
"value": "private, no-store, no-cache, must-revalidate"
}
]
}
]
},
}
以上!!
こんなのつくってます!!
積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!
もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ
要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪