PWA(Progressive Web App): 모바일 앱처럼 사용할 수 있는 웹 사이트

PWA(Progressive Web App)

: 사용자가 모바일 앱처럼 사용할 수 있는 웹 사이트

• 웹 기술(HTML, CSS, Javascript)로 모바일 네이티브 앱과 비슷하게 만들 수 있는 기술

 

 

 

PWA의 주요 특징

1. 진보적(Progressive)
   • 브라우저에 기능에 따라 작동하며, 최신 브라우저에서는 추가 기능을 제공
2. 반응형(Responsive)
   • 모든 디바이스(모바일, 태블릿, 데스크톱 등)에서 적절히 작동
3. 앱 같은 사용자 경험(App-like Experience)
   • 네이티브 애플리케이션과 유사한 UI/UX 제공
   • 앱스토어 없이 홈 화면에 설치 가능
4. 오프라인 기능(Offline Functionality)
   • Service Worker를 사용해 네트워크 상태와 관계없이 작동 가능
   • 캐싱된 데이터를 통해 오프라인에서도 콘텐츠를 제공
5. 푸시 알림(Push Notifications)
   • 네이티브 앱처럼 푸시 알림을 지원
6. 보안(Secure)
   • HTTPS에서 실행되며, 이를 통해 데이터 보안을 강화
7. 자동 업데이트(Self-updating)
   • 배포가 간단하며, 사용자는 항상 최신 버전을 사용

 

 

 

PWA의 주요 구성 요소

1. Service Worker
   • 백그라운드에서 네트워크 요청을 처리하고 캐시를 관리하는 JavaScript 파일
   • 기능
     • 오프라인 지원
     • 캐싱 관리
     • 푸시 알림 처리
2. Manifest 파일 (manifest.json)
   • PWA의 메타데이터를 정의(이름, 아이콘, 시작 화면 설정, 테마 색상 등)

     {
       "name": "My PWA",
       "short_name": "PWA",
       "start_url": "/",
       "display": "standalone",
       "background_color": "#ffffff",
       "theme_color": "#000000",
       "icons": [
         {
           "src": "/icon.png",
           "sizes": "192x192",
           "type": "image/png"
         }
       ]
     }
     

3. HTTPS
   • PWA는 보안 연결을 요구하며, 반드시 HTTPS로 제공되어야 함

 

 

 

PWA의 장점

1. 다양한 기기 호환
   • 하나의 코드베이스로 모든 플랫폼에서 작동
2. 빠른 로딩 속도
   • Service Worker를 통해 캐시된 콘텐츠를 제공
3. 앱스토어 의존성 제거
   • 앱스토어 없이 배포 가능하며, 업데이트도 간편
4. 비용 절감
   • 네이티브 앱을 별도로 개발하지 않아도 됨
5. SEO 친화적
   • 웹의 특성을 이용해 검색 엔진에 노출 가능

 

 

 

PWA의 단점

1. 제한된 기능
   • 일부 네이티브 기능(ex. 블루투스, NFC, 고급 센서 접근 등)은 브라우저에서 지원하지 않을 수 있음
2. 앱스토어 노출 부족
   • 앱스토어에서 검색되지 않아 다운로드 유도 경로가 제한적
3. iOS 지원 제한
   • 일부 PWA 기능(ex. 푸시 알림)이 iOS에서 제한적으로 지원

 

 

---

 

프로그레시브 웹 앱 소개 - 프로그레시브 웹 앱 | MDN

 

Learn PWA  |  web.dev

 

프론트엔드 개발자가 PWA 알아야 하는 이유 | 요즘IT