Nuxt/PWAを初めて使ってみた

Nuxt

新機能の仕様技術としてNuxtを選定した。「1つ前の案件でチームがvueを使っていた」「PWAを簡単に導入できる」「流行りの技術を使ってみたい」というのが理由だ。

触ってみて思ったのは、ディレクトリ構成が決まっているので深く考えなくてもある程度きれいな構成になるということ。何度かアサインメンバーを変更したが、みなすんなり開発に入れた。
自動整形を全員の環境に上手く導入できなかったのは課題。

失敗した点は2つ。

1つ目はデータの取得をコンポーネント側に書いてしまったこと。データがコンポーネントに紐づくためコンポーネントでデータ取得を行なったが、1つのページで複数のコンポーネントを利用した時にデータ取得の順番を制御できなくなってしまった。結果ファーストビューで利用されるデータを1番最初に取得できずに、表示の遅いページに。

2つ目は共通処理をmixinで書いてしまったこと。mixinを使うとどこで定義された関数か分かりにくくなってしまう。代わりにinjectを利用すると良い。injectを使うとどのファイルで定義した関数かが分かりやすくなる。

PWA

PWAの可能性を探るべく導入してみた。結論から言うと失敗だった。PWAの採用が失敗というよりは、PWAを利用してどう構成するかに失敗した。

一番の失敗は、PWAの特徴である「ホーム画面に追加できる」を意識しすぎてしまったこと。Webとしての使い方がおざなりになり、流入させにくい機能となってしまった。
Google Play等への公開もできれば話は変わるかもしれないが、今回は試していない。

逆に、Service Workerによるキャッシュはある程度うまく使えて、2回目以降の表示はとても早い。

疑問として残っているのは、PWA化の単位はどうすのが最適なのか。1つのサイトをまとめてPWA化してしまうと、ホーム画面からお目当ての機能へ素早くアクセスできない。逆に機能単位でPWA化してしまうと管理が煩雑になる＆ホーム画面に追加した機能以外ではService Worker等の旨味を享受できない。
※書いていて思ったが、上記は「ホーム画面に追加」してもらえることを前提とした考えであり、「ホーム画面に追加」率が低いのであれば1つのサイトをまとめてPWA化が良さそう。