[React] PWA를 통한 웹앱 만들기

React 웹앱 만들기

 

다음과 같은 명령어로 기존 프로젝트에 pwa 다운로드

npm install vite-plugin-pwa --save--dev

 

그리고 vite.config.ts 파일 수정

• VitePWA 설정 추가

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
    VitePWA({
      registerType: 'autoUpdate', // 자동 업데이트 설정
      includeAssets: ['favicon.ico', 'robots.txt', 'apple-touch-icon.png'], // 포함할 파일들
      manifest: {
        name: 'My PWA App',
        short_name: 'PWA App',
        description: 'A Vite + React PWA',
        theme_color: '#ffffff',
        background_color: '#ffffff',
        display: 'standalone', // 전체화면 표시
        icons: [
          {
            src: '/icons/logo192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: '/icons/logo512.png',
            sizes: '512x512',
            type: 'image/png',
          },
        ],
      },
      devOptions: {
        enabled: true, // 개발 환경에서도 PWA 사용 가능
      },
    }),
  ],
});

 

그리고 pwa 프로젝트 빌드

 

npm run build

 

그리고 프로젝트 실행

 

npm run preview

 

 

그러면 4173 포트에서 React 프로젝트 실행

 

 

컴퓨터 버튼 클릭!!(크롬에서만 구동가능)

 

이를 통해 웹앱 complete