【Svelte5】vite-plugin-pwa の設定からスマホテストまで

PWAとは？

開発環境

• macOS 26.0.1
• Svelte 5
• Typescript
• Vite

事前準備

vite-plugin-pwaをインストール

ngrokのインストールとアカウント作成
*ローカル環境を一時的にスマホで動作確認する為

SvelteのPJの追加設定内容

vite.config.ts

import { defineConfig, loadEnv } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig(({ mode }) => {
  // 環境変数を読み込む
  const env = loadEnv(mode, process.cwd(), '');
  
  return {
    plugins: [
      svelte(),
      VitePWA({
        // Service Workerを自動更新
        registerType: 'autoUpdate',
        // キャッシュする静的ファイル
        includeAssets: ['favicon.ico', 'icon-192.png', 'icon-512.png'],
        // pwaの設定内容
        manifest: {
          name: 'Svelte PWA Todo',
          short_name: 'Todo PWA',
          description: 'A simple PWA todo app built with Svelte 5',
          theme_color: '#ff3e00',
          background_color: '#ffffff',
          display: 'standalone',
          icons: [
            {
              src: 'icon-192.png',
              sizes: '192x192',
              type: 'image/png'
            },
            {
              src: 'icon-512.png',
              sizes: '512x512',
              type: 'image/png'
            }
          ]
        },
        // キャッシュ戦略の設定
        workbox: {
          globPatterns: ['**/*.{js,css,html,ico,png,svg}']
        }
      })
    ],
    server: {
      // ローカル環境で動作する為の設定
      host: process.env.NODE_ENV === 'development' ? '0.0.0.0' : 'localhost',
      port: 5173,
      strictPort: true,
      // HMRの設定
      hmr: {
        clientPort: 443,
        protocol: 'wss'
      },
      // 開発環境のみCORSを有効化
      cors: process.env.NODE_ENV === 'development',
      // 環境変数で指定、デフォルトはlocalhostのみ
      allowedHosts: env.ALLOWED_HOSTS 
        ? env.ALLOWED_HOSTS.split(',')
        : ['localhost']
    }
  };
});

スマホで動作確認

1, ngrokを使ってHTTPSトンネルを作成

ngrok http 3000

2, Forwardingで記載されてる外部URLにスマホでアクセス。
3, ブラウザの「ホーム画面に追加」などで、追加する

注意

iPhoneではSafariブラウザのみPWAインストールに対応

参考資料