Nuxt3でPWA対応する

少し躓いたのでメモとして残します。

nuxt v3.1.2
@vite-pwa/nuxt v0.0.7

1. @vite-pwa/nuxtをインストール

yarn add @vite-pwa/nuxt

2. それぞれのサイズのアイコンを作成し、/public配下に格納

それぞれのサイズのアイコンを作成するのに「icon ジェネレーター」で検索して出てきたサイトを使いました。

3. nuxt.config.tsに以下を追記

export default defineNuxtConfig({
  modules: ['@vite-pwa/nuxt'],
  pwa: {
    registerType: "autoUpdate",
    includeAssets: ["favicon.ico"],
    client: {
      installPrompt: true,
    },
    manifest: {
      name: 'name',
      description: "description",
      theme_color: "#ffffff",
      lang: "ja",
      short_name: "short_name",
      start_url: "/",
      display: "standalone",
      background_color: "#ffffff",
      icons: [
        {
          src: "icons/36x36.png",
          sizes: "36x36",
          type: "image/png"
        },
        {
          src: "icons/48x48.png",
          sizes: "48x48",
          type: "image/png"
        },
        {
          src: "icons/72x72.png",
          sizes: "72x72",
          type: "image/png"
        },
        {
          src: "icons/96x96.png",
          sizes: "96x96",
          type: "image/png"
        },
        {
          src: "icons/128x128.png",
          sizes: "128x128",
          type: "image/png"
        },
        {
          src: "icons/144x144.png",
          sizes: "144x144",
          type: "image/png"
        },
        {
          src: "icons/152x152.png",
          sizes: "152x152",
          type: "image/png"
        },
        {
          src: "icons/192x192.png",
          sizes: "192x192",
          type: "image/png"
        },
        {
          src: "icons/256x256.png",
          sizes: "256x256",
          type: "image/png"
        },
        {
          src: "icons/384x384.png",
          sizes: "384x384",
          type: "image/png"
        },
        {
          src: "icons/512x512.png",
          sizes: "512x512",
          type: "image/png"
        }
      ]
    },
    workbox: {
      navigateFallback: null
    },
    devOptions: {
      enabled: true,
      type: "module"
    },
    icon: {
      source: "icon.png",
    }
  },
})

本来はこれでOKのはずですが、manifestが読み込まれないので以下の工程を追加。

4. nuxt.config.tsにmanifest.webmanifestを読み込ませる

export default defineNuxtConfig({
  app: {
      link: [
        { rel: "manifest", href: "/manifest.webmanifest" },
      ]
  }
})

以上でPWA化が完了です。