【React】ViteでPWA対応させたWebサイトを作成する

はじめに

PWAを使用する事でWebアプリをネイティブアプリのように振る舞わさせることができます。
本記事では、React、Viteを使用してPWA対応のサイトを作成してみます。

PWAとは？

プログレッシブウェブアプリ (PWA)を利用する事でホーム画面のアイコンを追加し、Webアプリをネイティブアプリのように起動できます。以下のような点が便利です。

• アドレスバーを消したフルスクリーン表示、プッシュ通知を行うことができる点
• アプリストアを介さずにWebアプリをネイティブアプリのように提供できる点
• クロスプラットフォームに提供できる点

環境

• react： 18.3.1
• vite： 5.3.1
• vite-plugin-pwa：0.20

Viteのプラグインをインストール

vite-plugin-pwa をインストールします。

npm install -D vite-plugin-pwa

Viteの設定にPWAプラグインを追加

VitePWAの設定をvite.configに追加します。registerType とすることでブラウザがアプリの更新を検知し、キャッシュの更新とリロードを自動で行ってくれます。
publicフォルダ内に assetsフォルダを作成し192x192と512x512サイズの画像を配置。

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
  react(),
  VitePWA({
    registerType: 'autoUpdate',
    includeAssets: ['assets/favicon.ico'],
    manifest: {
      name: 'PWA Hoge App',
      short_name: 'App Name',
      description: 'test app',
      theme_color: '#ffffff',
      icons: [
        {
          src: 'assets/192_sample_img.png',
          sizes: '192x192',
          type: 'image/png'
        },
        {
          src: 'assets/512_sample_img.png',
          sizes: '512x512',
          type: 'image/png'
        }
      ]
    }
  })
  ]
});

実行結果

今回はvercelにデプロイしてみました。
iphoneの実機で確認すると、アドレスバーのなくフルスクリーンで表示されている事を確認。

参考