[PWA] React + Vite 프로젝트 PWA 적용

PWA란 ?

PWA는(progressive web app)의 줄임말로서 웹과 네이티브 앱의 기능 모두 사용할 수 있도록 만든 기능이다. 

 

웹사이트의 장점은 빠른 접근성이다. 어플리케이션을 설치하는 것보다 더 빠르게 접근이 가능하고 링크를 통한 공유가 가능하다는 점이 웹 의 특징이다. 반면에 앱은 웹보다 더 부드러운 사용자 경험을 제공한다. 또한, 오프라인에서도 동작이 가능하며 설치가 된 이후에는 웹사이트보다 쉽게 접근이 가능하다.

 

PWA는 이 두가지 기능을 모두 통합한 웹앱이다. 즉 웹을 앱처럼 사용할 수 있다.

 

PWA 시작하기

PWA는 manifest.json 파일과 serviceworker.js 파일만 있으면 만들 수 있다. 그러나 Vite 에서는 PWA를 쉽게 적용할 수 있는 플러그인이 있으므로 해당 플러그인을 사용했다.

 

Vite PWA 바로가기

 

아직 프로젝트를 만들지 않은 상태라면 해당 명령어를 입력하고 프로젝트를 이미 만든 상태에서 PWA를 적용하고 싶다면 아래에 있는 명령어를 입력하면 된다.

 

프로젝트 폴더가 없는 경우

pnpm create @vite-pwa/pwa

 

이미 프로젝트가 있는 경우 

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

 

설치가 완료되었다면 vite.config.ts 에서 플러그인 등록을 해준다.

import { VitePWA } from 'vite-plugin-pwa'

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

 

해당 부분으로 앱의 이름, 로고 등 이미지 파일을 넣을 수 있고, 위에서 언급한 매니페스트와 서비스 워커도 함께 생성된다. 

예시 속성은 다음과 같다.

 

• name / short_name: 앱 이름 / 짧은 이름
• icons: 앱 아이콘 (여러 크기 지원, 192x192, 512x512 필수)
• start_url: 앱 시작 URL (예: /index.html)
• display: 앱 표시 방식 (standalone, fullscreen, minimal-ui, browser)
• background_color: 초기 로딩 화면 배경색
• theme_color: 상태 표시줄(탭바) 색상

예시

  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'tAIro - AI가 보는 타로',
        short_name: 'tAIro',
        start_url: '/',
        display: 'standalone',
        background_color: '#ffffff',
        theme_color: '#4F2D86',
        icons: [
          {
            src: 'icon/icon-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: 'icon/icon-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
        ],
      },
      devOptions: {
        enabled: true,
      },
    }),

 

여기서 devOption은 dev로 열었을 때에도 PWA를 확인할 수 있어서 넣는 편이 좋다.

 

이제 프로젝트를 실행하면 URL 창에 다음과 같은 아이콘이 뜬다.

이 아이콘을 누르면 어플형태로 해당 사이트를 다운 받을 수 있으며 마찬가지로 휴대폰에서도 다운이 가능하다.

 

휴대폰에서 다운 받는 방법

배포된 url 로 이동 뒤, 홈화면에 추가 버튼을 누르면 쉽게 추가할 수 있다.

아이폰에서는 사파리로 들어가서 공유 버튼을 누르면 홈화면에 추가 버튼이 있음 (다른 브라우저에는 없음)

 

적용 화면

 

 

PWA 적용이 끝났다면 FCM을 이용해 알림을 보내는 것도 가능하다. FCM 적용은 여기서 확인할 수 있다.