Vue + PWA アプリでシンプルにバージョン番号を管理するにはどうするか

最近VueやらPWA界隈に触れ始めてまだまだ勉強不足なため、自分のググり力では、Vue + PWAでアプリのバージョンをどう管理していくかをうまく見つけられませんでした。
そのため、一旦自分がどういう方針で進めていこうかのアイデアを記録した記事になります。

目次

• 目次
• 1. まえがき
• 2. 概要
• 3. サンプル
• 4.まとめ？

---

1. まえがき

　ここでいうアプリのバージョンとは、パッケージで管理するようなv1.0.1とかv1.1.0みたいなバージョンを指します。
　OSSのプロダクトやネイティブアプリとかでも使われているような「リリース」されていくバージョンだと思っています。

　(Vue、React、SPA、PWA辺りに強い人からするとこんな常識も知らないのか、になるかもしれません。その場合はTwitterなどでお知らせいただけますと幸いです。)

---

2. 概要

　なぜ、PWAでバージョン番号を管理する必要があるのか。自分なりには以下の必要性を感じています。

1. 機能追加などでAPIが変わりバージョンによって使い分けるタイミングがある
   →PWAであれば基本再起動したタイミングでアプリが更新されるけど念の為

2. バージョンによってLocal Storageの保存形式を変えて実装してしまった
   →v1.0.1とv1.0.2で Local Storage に保存しているJSONフォーマットが変わっている場合など、新しくロードされたバージョンでデータ変換処理を実装する必要がある
   →使う人によっては、v1.0.1で使ってた人が次起動したときにv1.0.3だった場合どうするか、などもあり得るかと

3. お知らせを実装したい
   →アプリのバージョンが代わるたびに何かしらお知らせを出す

　以上の課題に対して、あまりキレイな方法ではないかもしれませんが、シンプルに Vue の prototype 要素を使って解消していきます。

---

3. サンプル

　今回は Vue.js + PWA のサンプルですが、構成の細かいところについては割愛させていただきます。
　チュートリアル的には、Vue.jsでPWAアプリを作る の1、2あたりを参考にさせてもらいながら進めていました。(ありがとうございました。)

　ではバージョン番号を管理する実際のサンプルです。

---

　まず main.js 内で、いわゆるグローバル変数的な感じでバージョン番号を定義します。

Vue.prototype.$version = '1.0.1'

　次に、自分の場合は App.vue で LocalStorage に今のバージョン番号を保存する処理を追加します。

mounted () {
  if (localStorage.getItem('version') === null || localStorage.getItem('version') < this.$version) {
    localStorage.setItem('version', this.$version)
  }
},

　こうしておくと、main.js で 1.0.2 などに変更してリリースしたときにこのif文の中に入るので、初めてアクセスしたときやバージョンが変わったときに必要な処理が諸々呼び出せます。
　自分の場合は、機能追加などでバージョンが上がったことをお知らせしたかったので、このタイミングでお知らせを出すように実装してみました。
　あとは同じように各 vue ファイルから this.$version を使えば現在のバージョン番号が取得できるので、APIが変わった場合の挙動などをバージョン番号で制御できるようになります。

---

4.まとめ？

　できれば package.json で書くバージョン番号を使って、アプリ内で引き回したかったのですが、その方法がうまく見つけられませんでした。。。
　そのため、どうしてもハードコードする必要がありましたが、できるだけシンプルに管理したかったので、今回の方法を取っています。
　この方法であれば、 package.json と main.js の二箇所の番号を合わせるだけなので最小限で済み、継続的に開発できるんじゃないかと思います。

　趣味で作った「コーヒー淹れる人向けアプリ」でこの方法を使っているので、よかったらご参考ください。
　Enjoy Coffee