はじめに
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
目次
事前準備
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>
