1. ホーム /
  2. Blog /
  3. Nuxt.js /
  4. 「Nuxt3」で「PWA」アプリを開発する
Nuxt.js

「Nuxt3」で「PWA」アプリを開発する

  • 2023.04.02
  • by ShinyaTomozumi
  • 0

以前に「Nuxt3」のアプリ開発で問題として「PWA」のライブラリでエラーとなると記述しました。

「Nuxt.js」+「TypeScript」でWebアプリの開発

「PWA」について詳細は解説しませんが、大雑把にいうとWebページをアプリケーションの様に使用できる仕組みです。
どうしても「Nuxt3」で「PWA」として開発したいので、調べたところ海外の方が「Nuxt3」でも「PWA」アプリを導入しやすくするためのライブラリを作成しておりました。

Dark Mode

nuxt-pwa-module (this link opens in a new window) by ShinyaTomozumi (this link opens in a new window)

Create template source code for the batch from the batch design document.

1 Subscriber 0 Watchers 0 Forks Check out this repository on GitHub.com (this link opens in a new window)

READMEに使い方が記載しておりますが、こちらでも完結にまとめてみました。

環境

  • npm 9.6.3
  • yarn 1.22.17
  • nuxt 3.3.2

「@kevinmarrec/nuxt-pwa」を導入する

まずはインストールします。
以下のコマンドでインストールすることができます。

$ yarn add -D @kevinmarrec/nuxt-pwa

「nuxt.config.ts」に以下の記述を追加します。

export default defineNuxtConfig({
    ...省略

    modules: [
        // モジュールの使用
        '@kevinmarrec/nuxt-pwa',
    ],

    pwa: {
        // PWAの設定
        manifest: {
            name: 'サイト名',
            lang: 'ja',
            start_url: 'サイトURL',
            display: 'fullscreen',
            icons: [
                {
                    src: '/icons/icon-512x512.png',
                    type: 'image/png',
                    sizes: '512x512',
                    purpose: 'any'
                }
            ],
            short_name: 'サイト名',
            description: 'サイトの説明',
            theme_color: '#163956',
            background_color: '#163956',
        },
    },

    workbox: {
        // workboxの設定
        enabled: true, // 開発環境でも有効にする場合は「true」とする
    }
});

この状態でSPAとしてファイルを出力する場合は以下のコマンドを実行します。

$ yarn run generate

公式のライブラリが出るまで、このやり方で行くのが無難だと思われます。