👨‍💻
Hello, I’m JungHyeon
Blog
Vite React 프로젝트 PWA 적용하기

Vite React 프로젝트 PWA 적용하기

요약
Vite기반 React 프로젝트에 PWA를 적용해보기
작성일
Jan 23, 2025
태그
Web
React
PWA

Vite로 PWA 프로젝트 만들기

PWA(Progressive Web App)는 웹 기술을 사용해 네이티브 앱과 유사한 사용자 경험을 제공하는 웹 애플리케이션입니다. 이전에는 Next.js 프로젝트에서 PWA를 적용했던 경험이 있습니다. 마찬가지로 React에서도 PWA 적용을 도와주는 라이브러리를 이용해 PWA프로젝트를 만들었습니다.
만약 Next.js 환경에서 PWA적용과 PWA의 조금 더 상세한 내용이 궁금하시다면 아래 글을 참고하시면 도움을 줄 수 있습니다.
Next.js 프로젝트 웹앱 만들기 - PWA(Progressive Web App)
코드를 낚는 사람의 개발 블로그
Next.js 프로젝트 웹앱 만들기 - PWA(Progressive Web App)
https://www.codefisher.dev/nextjs-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%9B%B9%EC%95%B1-%EB%A7%8C%EB%93%A4%EA%B8%B0--pwaprogressive-web-app
Next.js 프로젝트 웹앱 만들기 - PWA(Progressive Web App)

vite-plugin-pwa를 사용해서 PWA 제작하기

먼저 프로젝트를 만들기 전이라면 설치가 아닌 시작을 따르면 되고 이미 프로젝트를 시작한 후 적용한다면 설치하기를 따라가면 됩니다.

vite-plugin-pwa로 시작하기

npm create @vite-pwa/pwa@latest
pnpm create @vite-pwa/pwa
yarn create @vite-pwa/pwa

vite-plugin-pwa 설치하기

npm install -D vite-plugin-pwa
pnpm add -D vite-plugin-pwa
yarn add -D vite-plugin-pwa

템플릿으로 시작하기

create-pwa
vite-pwa • Updated Mar 24, 2025
npm create @vite-pwa/pwa@latest my-vue-app -- --template vue
pnpm create @vite-pwa/pwa my-vue-app --template vue
yarn create @vite-pwa/pwa my-vue-app --template vue
💡
호환성 참고 사항
Vite에는 Node.js 버전 18.xx 또는 20+가 필요합니다.
그러나 일부 템플릿은 작동하려면 더 높은 Node.js 버전이 필요할 수 있습니다. 패키지 관리자가 이에 대해 경고하는 경우 Node를 업그레이드해야 합니다.

vite-plugin-pwa 구성하기

PWA로 프로젝트를 시작하지 않고 프로젝트 중간에 설치한 경우 vite.config.js 또는 vite.config.ts 파일에 vite-plugin-pwa를 추가해야 합니다.
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    VitePWA({ registerType: 'autoUpdate' })
  ]
})
 

Vite 설정 파일 구성하기

vite-plugin-pwa 라이브러리를 이용하면 쉽고 간편하게 PWA적용이 가능합니다.
vite.config.js 폴더 안에 아래 코드를 참고하여 작성하면 적용이 완료됩니다.
import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
      manifest: {
        name: 'My PWA App',
        short_name: 'PWA App',
        description: 'A simple PWA application',
        theme_color: '#ffffff',
        background_color: '#ffffff',
        display: 'standalone',
        start_url: '/',
        icons: [
          {
            src: 'pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          }
        ]
      },
      workbox: {
        cleanupOutdatedCaches: true,
        clientsClaim: true,
        skipWaiting: true,
      }
    })
  ]
});
추가로 알림 설정, 캐싱 전략 활용 등에 내용이 궁금하다면 아래 문서를 참고하는 것이 도움이 됩니다.

참고문헌

Vite PWA
Zero-config PWA Framework-agnostic Plugin for Vite and Integrations
Vite PWA
https://vite-pwa-org.netlify.app/
Vite PWA