まず公式に則ってNuxt.jsでアプリを作ります。
https://ja.nuxtjs.org/guide/installation/

以下のコマンドをターミナルで実行します。

npxコマンドのインストールがまだでしたらbrewでインストールします。

いくつか質問されるので、作成したいアプリに合わせて選択してください。

回答が終わると、アプリを作成する準備ができました。
以下のコマンドでアプリを立ち上げます。

コンパイルが完了すると、アプリケーションは http://localhost:3000 で動いてくれています。
2,3分で立ち上がるので、コーヒーでも淹れて待っていましょう。

次にNuxt.jsで作成したアプリをPWA化します。
こちらも公式にやり方が載っているのでそれに沿ってやっていきます。
https://pwa.nuxtjs.org/setup

まず以下のコマンドを入力しPWAパッケージを入れます。

続いてnuxt.config.jsにPWAモジュールを追記します。

次にstaticディレクトリが存在していることを確認し、PWAアプリになったときのicon画像をセットします。
公式では512x512px以上を推奨しています。
ちなみにこちらの設定は無効化もできます。

次に.gitignoreに以下を追記します。

こうすることでサービスワーカーが作成するファイルをgitの管理下から除外できます。

PWA化できたので、ビルドします。

以上で設定は完了です。

最後にNetlifyにデプロイします。
https://www.netlify.com/

Netlifyは静的なサイトのホスティングサービスです。
Nuxt.jsで作成したアプリをもとに静的ファイルを生成し、Netlify上に公開できます。

やることは大きく3つです。
- ブランチ(masterなど)をデプロイする
- ビルドコマンドを実行(npm run generate)
- 公開ディレクトリの設定(dist)

言わずもがな公式のやり方に沿ってやっていきます。
https://ja.nuxtjs.org/faq/netlify-deployment/

上記後、5分かからないくらいでデプロイが完了します。
いやー、めちゃくちゃ便利です。

デプロイされたサイトを見てみましょう。
いい感じですね。

上の画像からマウスがあるところを見てみると、「インストールしています」という文字があります。
PWAのアプリではこの表記があり、押下するとアプリとしてダウンロードできます。

試しにPWAで開いてみましょう。

いい感じですね。
MacではさもApp Storeから落としたアプリのように操作できます。

改めてNuxt.jsとPWAがめちゃくちゃ便利だと実感しました。
めっちゃ便利なんで、引き続きPWAアプリの開発を楽しくできそうだなと感じました。
気になっている人はすごい簡単にできるので、ぜひ試してみてください。