はじめに

Nuxt3でシンプルにPWAを実装するための情報がなかったため、振り返って自分が欲しかった情報をまとめました。

ゴール

Nuxt3でPWA(vite-pwa/nuxt)を実装する。

開発環境

MacOS 13.4.1 (Ventura)
pnpm 8.11.0
Vue 3.4.3
Nuxt 3.9.0
vite-pwa/nuxt 0.4.0

目次

事前準備
@vite-pwa/nuxtのインストール
Web App Manifestの追加
Vueコンポーネントの追加
参考文献

事前準備

PWA化したいNuxt3プロジェクトの作成

前回記事を参照しながら作成する

@vite-pwa/nuxtのインストール

プロジェクトのルートディレクトリに移動し、以下のコマンドを入力

# 開発環境(-D)に@vite-pwa/nuxtを追加
pnpm add -D @vite-pwa/nuxt

nuxt.config.tsのmodulesに@vite-pwa/nuxtを追加

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@vite-pwa/nuxt'],
  devtools: { enabled: true }
})

Web App Manifestの追加

PWAの要件の一つ、インストール可能(Installable)を実現するためのWeb App Manifestをnuxt.config.tsに追加する。
最終的な設定の中身は以下の通り。

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@vite-pwa/nuxt'],
  devtools: { enabled: true },
  pwa: {
    registerType: 'autoUpdate',
    manifest: {
      name: 'Nuxt Vite PWA',
      short_name: 'NuxtVitePWA',
      theme_color: '#ffffff',
      icons: [
        {
          src: 'icon-192x192.png',
          sizes: '192x192',
          type: 'image/png',
        },
        {
          src: 'icon-512x512.png',
          sizes: '512x512',
          type: 'image/png',
        },
        {
          src: 'icon-512x512.png',
          sizes: '512x512',
          type: 'image/png',
          purpose: 'any maskable',
        },
      ],
    },
    workbox: {
      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
      navigateFallback: '/'
    },
    client: {
      installPrompt: true,
      // you don't need to include this: only for testing purposes
      // if enabling periodic sync for update use 1 hour or so (periodicSyncForUpdates: 3600)
      periodicSyncForUpdates: 3600,
    },
    devOptions: {
      enabled: true,
      suppressWarnings: true,
      navigateFallbackAllowlist: [/^\/$/],
      type: 'module',
    },
  }
})

pwaというプロパティが見つからないというエラーが出る場合は、再ビルドすれば解消した。

# @プロジェクトのルートディレクトリ
pnpm build

また、アイコンに関しては、PWA APP ICON GENERATORで生成して、ルートディレクトリ配下の/publicにWeb App Manifest通りの名前で配置しておく。

Vueコンポーネントの追加

トップページとなっているvueファイルに、VitePwaManifestコンポーネントを追加。
これで晴れてPWAとしてアプリが動き始めるはず！！

app.vue

<template>
  <div>
    <!-- 下の一行を追加（NuxtPwaManifestでもOK！） -->
    <VitePwaManifest />
    <NuxtWelcome />
  </div>
</template>

ここまでお疲れ様でした！

参考文献