SPAはとてもすてきだけど、Hostingにアップロードしてもすぐに更新されない。。
たとえば、メンテナンス画面に変更しても、キャッシュが残っててメンテナンスモードにならないとか。。

この記事をみると、Reactで強制的にリビジョンアップする方法が載っていたので、
Nuxt.jsでもできないかやってみたときの備忘録。

ざっくりとした流れ

流れとしては、こんな感じ。

1. staticディレクトリにJSONファイルでバージョン番号を用意
2. 環境変数にリビジョン番号を保持するように設定
3. 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を使うようにするのとあわせて、

1. 環境変数(VERSION)の設定したり、
2. 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)まで♪

参考にしたサイトさま

• javascript – シングルページアプリケーション（SPA）ページを強制的に更新する方法 - コードログ
• 【React.js】SPAでのリビジョンアップ対策 - Qiita