Vite を使った Vue 3 プロジェクトのPWA化

Vue 3 で導入された公式ツール Vite で作ったプロジェクトを簡単にPWA化できる vite-plugin-pwa というものがあり、とても便利。

ただし manifest にちょっと手を加えることで動きます（5/23時点）。

基本的にはREADMEに従います。

  1. インストール 
    npm i vite-plugin-pwa -D
  2. vite.config.js へ設定追記 
    import { VitePWA } from 'vite-plugin-pwa'

export default {
plugins: [
    VitePWA({
      registerType: 'autoUpdate', 
      manifest: {
        // content of manifest
      },
      workbox: {
        // workbox options for generateSW
      }
    })
  ]
}
  3. main.ts を編集 
    import { createApp } from 'vue'
import App from './App.vue'
import { registerSW } from 'virtual:pwa-register'

registerSW()
createApp(App).mount('#app')
  4. ビルド＆実行 
    npm run build && npm run serve

これでPWA化されるはずですが、開発者ツールで警告が出てきてしまった。

アプリとしてインストールできず、警告が出る

警告の内容的にIconの情報が足りていないようなので、次のように修正しました。

  1. public/icons フォルダを作り、アイコンファイルを追加。
  2. 追加したアイコンファイルを指定するように、vite.config.js 内の manifest を追記 
    manifest: {
  src: "icons/144x144.png",
  sizes: "144x144",
  type: "image/png",
  purpose: "any"
},
  3. ビルド＆実行 
    npm run build && npm run serve

これで警告が消え、アプリとしてインストールできるようになりました。

#Vue 3 #PWA #Vite