Webアプリ開発 React(Vite)でPWAを実装する

はじめに

今回は、React（Vite）で作成したWebサイトにPWAを実装したいと思います。

前の記事

前回は、React（Vite）でWebサイトを作成し、Cloudflare Pagesで公開することができました。
https://zenn.dev/kinakokyoryu/articles/ee93e3e8b24826

バージョン情報

• vite: ^6.0.5
• react: ^18.3.1
• typescript: ~5.6.2
• vite-plugin-pwa: ^0.21.1

手順

1. publicフォルダに、自作のアイコン画像logo192.png、logo512.pngというファイル名でアップロードします。
   アイコン画像のサイズはそれぞれ192x192、512x512（単位はpx）にします。
2. Vite PWAをインストールします。
   ターミナル

   npm install vite-plugin-pwa
   

3. vite.config.tsを下記に変更します。name、short_name、descriptionにはそれぞれアプリ名、短いアプリ名、説明を入力します。
   vite.config.ts

       import { defineConfig } from 'vite'
       import react from '@vitejs/plugin-react-swc'
   +   import { VitePWA } from 'vite-plugin-pwa'
   
       // https://vite.dev/config/
       export default defineConfig({
         plugins: [
           react(),
   +       VitePWA({
   +             registerType: "autoUpdate",
   +             includeAssets: ["favicon.ico", "logo192.png"],
   +             injectRegister: "auto",
   +             manifest: {
   +               name: "＜アプリ名＞",
   +               short_name: "＜短いアプリ名＞",
   +               description: "＜説明＞",
   +               theme_color: "#000000",
   +               icons: [
   +                 {
   +                   src: "logo192.png",
   +                   sizes: "192x192",
   +                   type: "image/png"
   +                 },
   +                 {
   +                   src: "logo512.png",
   +                   sizes: "512x512",
   +                   type: "image/png"
   +                 },
   +                 {
   +                   src: "logo512.png",
   +                   sizes: "512x512",
   +                   type: "image/png",
   +                   purpose: "any"
   +                 },
   +                 {
   +                   src: "logo512.png",
   +                   sizes: "512x512",
   +                   type: "image/png",
   +                   purpose: "maskable"
   +                 }
   +               ]
   +             }
   +           })
           ],
         server: { host: true },
       })