PWA 적용하기

rabbit jack·2025년 7월 15일

FrontEnd

목록 보기

4/4

1. 소개

PWA (Progressive Web App)는 웹 기술(HTML, CSS, JavaScript)을 사용하여 만든 앱이지만, 네이티브 앱처럼 설치되고 작동할 수 있도록 해주는 웹 어플리케이션이다.

React Native등을 사용하여 앱을 만드는것도 가능하지만, 실상은 핵심부터 다른 기술이다.

항목	PWA	React Native
기술 스택	HTML, CSS, JS (기존 웹 기술)	JavaScript + React + 네이티브 브릿지
동작 환경	웹 브라우저 기반 (설치해도 브라우저 셸 위에서 실행)	완전한 네이티브 앱 (iOS/Android)
앱스토어 등록	기본적으로 ❌ (수동 등록 가능은 하지만 권장 안됨)	✅ 앱스토어 정식 등록 필수
설치 방식	‘홈 화면에 추가’ (모바일 웹에서)	앱스토어에서 설치
퍼포먼스	브라우저 기반 → 상대적으로 느림	네이티브 렌더링 → 더 빠르고 부드러움
네이티브 API 접근	제한적 (GPS, 푸시 등 일부만 가능)	거의 모든 네이티브 기능 접근 가능 (카메라, 센서, 블루투스 등)
개발 난이도	쉬움 (웹 개발자 친화적)	중간 이상 (앱 개발 경험 요구)
업데이트 방식	코드 수정 → 즉시 반영	앱스토어 심사 필요 (OTA 업데이트는 일부 가능)

결국 PWA는 웹사이트를 앱처럼 보이게 만드는것이며,

React Native는 실제 앱을 JS로 개발하는것이다(JS로 감싼 네이티브 앱)

2. PWA 생성 절차

PWA를 만들기 위해선 전체적으로 아래의 절차를 따르면된다.

manifest.json 만들기
service worker 등록하기
HTML에 메니페스트 & 메타 태그 연결
HTTPS 환경 또는 localhost 에서 테스트
DevTools로 설치 조건 확인
배포

1) `manifest.json` 만들기

// public/manifest.json
{
  "name": "My PWA App",
  "short_name": "PWAApp",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#317EFB",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

이 파일은 반드시 /public 폴더에 위치해야 하며,
<link rel="manifest" href="/manifest.json">로 HTML에 연결해야한다.

2) `service worker` 파일 만들기

// public/sw.js
self.addEventListener('install', (e) => {
  console.log('Service Worker: Installed');
});

self.addEventListener('fetch', (e) => {
  e.respondWith(fetch(e.request));
});

3) HTML에 연결

<!-- index.html -->
<head>
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#317EFB">
</head>
<body>
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js');
    }
  </script>
</body>

4) 접속하기

pc에서 https 또는 localhost로 접속하면 주소입력란 옆에 버튼이 추가되어있다.

3. 주의사항

https 또는 localhost로 접속해야 PWA 접속이 활성화된다.
vite 개발모드로 서버를 실행할 경우, vite.config.js 파일에서 host:true 설정을 해야한다. (https://velog.io/@hoyahoya/vite-localhost-connect)

rabbit jack