【Nuxt.js】@nuxt/pwaでサクッとPWA対応しよう！

Nuxt.jsのモジュール@nuxt/pwaを使って、サクッとPWA（Progressive Web Application）に対応させる方法を紹介します。

Supercharge Nuxt with a heavily tested, updated and stable PWA solution

@nuxt/pwaをインストール

まず、@nuxt/pwaをインストールします。

npm i --save-dev @nuxtjs/pwa

nuxt.config.jsのbuildModulesに@nuxt/pwaを追加し、有効にします。

export default {


...
  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [

    '@nuxtjs/pwa',
  ],
...

あとはホスティングするだけです。https対応のサーバーで公開すると、PWAとしてインストールできるようになります。

マニフェストをカスタマイズするには？

PWAのアプリ名などをカスタマイズしたいときは、nuxt.config.jsにpwaを追加します。

  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    manifest: {

      ...
    },

  },

設定できるマニフェストの項目は@nuxt/pwaのドキュメントで公開されています。

Manifest Module

Manifest adds Web App Manifest with no pain

アプリの名前や言語については最低限カスタマイズしておくことをおすすめします。

  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    manifest: {
      lang: 'ja',
      name: "バスずかん|仙台を中心としたバスの図鑑",
      short_name: "バスずかん"
    },

  },

スマホやタブレットで表示されるアプリ名はshort_nameで設定します。nameはPCにインストールしたときに表示される名前です。

実際にリリースする場合はもっと細かくカスタマイズすることになります。