siromathics

Nuxt.jsでPWA化する

created:

WebサイトをPWA(Progressive Web Apps)化すると、iOSのSafariでホーム画面に追加しアプリのような動きができたり、オフラインでも動作したりするなどの恩恵が受けられます。 Nuxt.jsでは@nuxtjs/pwaパッケージを使用することで簡単にPWA化することができます。

インストール

yarn add @nuxtjs/pwa

nuxt.config.jsを編集

パッケージをインストールしたら、nuxt.config.jsを編集していきます。

export default {
  // ...

  modules: [
    '@nuxtjs/pwa'
  ],

  manifest: {
    name: 'Example name',
    lang: 'ja',
    short_name: 'Example short name',
    title: 'Example title',
    'og:title': 'Example title',
    description: 'Example description',
    'og:description': 'Example description',
    theme_color: '#ffffff',
    background_color: '#ffffff'
  },

  workbox: {
    dev: true // 開発時にもPWAを有効化
  },

  // ...
}

このとき、staticディレクトリ直下にアイコン画像をicon.pngとして設置するとパッケージ側で様々なサイズに書き出してくれます(ディレクトリやサイズなどはmanifest内で変更可能です)。

デプロイする

nuxt.config.jsを編集したら、通常通りビルドすることでPWA化することができます(今回はgenerate)。

yarn generate

これをNetlifyなどにデプロイすればPWA化されているかと思います。

なお、ChromeのDeveloper ToolsのApplicationタブのManifestからPWA化されているか確認できます。

参考

タグ一覧