🥨
自作サイトをPWA対応にしてみた (Vite)

2025/04/17に公開
 まえがき自作サイトを PWA 対応してみました。
簡単にできるかと思ったのですが若干詰まった箇所があったので共有します。
対応したサイトはこちらになります。
https://dual-n-back-zundamon.pages.dev/

 Vite PWAVite PWA というライブラリを使用しました。

https://vite-pwa-org.netlify.app/guide/
自分のサイトは Vite で作っていたためこのライブラリを導入するだけですぐに PWA 化できるかなと思っていました。

 詰まったポイント公式ドキュメントの指示に従ってライブラリをインストールし、 vite.config.js に以下を記載しました。
import { defineConfig } from 'vite';
+import { VitePWA } from 'vite-plugin-pwa'
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [
    react(),
+    VitePWA({ registerType: 'autoUpdate' })
  ]
})
しかしこれだけでは PWA になりませんでした。
pnpm create @vite-pwa/pwa でまっさらな状態から PWA プロジェクトを作った場合はちゃんと動いたので、それとの差異を確認しました。
最終的に以下をすることで自分のサイトを PWA 化することができました。

vite.config.js に pwaAssets の設定を追加する
import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa'
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
+      pwaAssets: {
+        disabled: false,
+        config: true,
+      },
    })
  ],
})
@vite-pwa/assets-generator をインストールする
pwa-assets.config.ts を作成し、以下を記載する
import {
    defineConfig,
    minimal2023Preset as preset,
} from '@vite-pwa/assets-generator/config'

export default defineConfig({
    headLinkOptions: {
        preset: '2023',
    },
    preset,
    images: ['public/favicon.svg'],
})
ちなみになぜ上記の変更をしないと PWA 化できなかったのかはわかっていません。
詳しい方いたら教えて下さい。

 その他の知見PWA を一度インストールすると Service workers が残ってしまい、サイトが変わっても PWA に関する挙動が変わらないという現象が起こりました。
Chrome DevTools で Application > Service workers から右側の unregitser を押すことで一度インストールした Service workers を消去してサイトの正しい挙動を確認することができました。
まえがき

Vite PWA

詰まったポイント

その他の知見

Discussion
