PWA (Progressive Web App)

1. PWA (Progressive Web App)의 개념 및 특징

개념특징
웹 브라우저에서 Native App 같은 사용자 경험을 제공하기 위해 서비스워커, 매니페스트 기반 표준 패턴을 사용하는 Web App 기술– Native App 같은 사용자 경험 제공
– 웹 브라우저에서 바로 실행
– 프리캐시 기반 페이지 표시 속도 향상
– https 기반 보안 강화, 푸시알림 기능
  • 2015년 Google Chrome 엔지니어 알렉스 러셀(Alex Russel)이 점진적(progressive)으로 네이티브 앱 수준으로 근접해가는 웹이라는 개념을 처음 제시하였고, 이듬해 2016년 Google I/O 개발자 콘퍼런스에서 PWA를 미래의 웹 앱으로 소개

 

2. PWA의 아키텍처 및 핵심 기술

(1) PWA의 아키텍처

(2) PWA의 핵심 기술

구분핵심 기술주요 기능
사용자
경험
Web App Manifest– App 메타데이터(아이콘, 이름 등) 포함 JSON 파일
– App이 설치된 것처럼 인식 및 홈 화면에 추가
Responsive Design– 다양한 화면 크기와 장치에서 최적의 사용자 경험을 제공하는 반응형 디자인 지원
App Shell Architecture– App의 기본 구조(HTML, CSS 등)를 빠르게 로드
– 콘텐츠를 동적으로 가져와 페이지 로딩 시간 단축
오프라인
사용
Service Workers– 백그라운드에서 실행되며 네트워크 요청을 캐싱하여 오프라인 상태 어플리케이션 작동
IndexedDB– 로컬 데이터베이스로, 오프라인 상태에서도 데이터를 저장하고 검색
Background Sync– 네트워크 연결 단절 상태 데이터 송수신
– 네트워크 재연결 시 동기화 수행
보안 및
알림
HTTPS– SSL/TLS 인증서 기반 안전한 연결을 보장
Push Notifications– 사용자가 어플리케이션과 상호작용하지 않을 때에도 알림을 통해 사용자와 소통
  • PWA의 핵심 기술을 통해 네이티브 앱처럼 동작하면서 웹의 유연성과 접근성을 최대한 활용하여 개발 및 배포 비용/시간을 절감하고 높은 수준의 사용자 경험 제공

 

3. PWA와 Native App, Web App과의 차이점

비교 항목PWANative AppWeb App
동작 위치웹 브라우저디바이스에 설치된 App웹 브라우저
개발 언어공통 (HTML, CSS, JavaScript)안드로이드(Java), iOS(Swift) 등
플랫폼 별 지원 언어
공통 (HTML, CSS, JavaScript)
기능 제공
범위
브라우저 제공 기능으로 제한디바이스 고급 기능 사용 가능브라우저 제공 기능으로 제한
플랫폼
호환성
크로스 플랫폼플랫폼 간 호환 불가크로스 플랫폼
오프라인
사용
오프라인 사용 가능오프라인 사용 가능오프라인 사용 불가
로딩 속도캐시 기반 속도 향상고속 로딩 가능로딩 속도 느림
용도간단/신속한 App 배포센서 등 고급 기능 사용일반 웹 페이지 서비스
  • Web App은 개발 비용 절감 및 여러 플랫폼으로 제공 가능하지만 기능적으로 한계가 있고, Native App은 높은 성능과 사용자 경험을 제공하지만 개발 비용이 높으며, PWA는 개발 및 배포가 용이하고 높은 성능과 사용자 경험을 제공하지만 Native App에 비해 기능적인 한계가 있어, 용도에 따라 적절한 기술을 사용하는 것이 필요

 
[참고]

  • Lillo Blog, 프로그레시브 웹 앱(PWA)의 정의/장점/차이
  • Microsoft, Get started with Progressive Web Apps
  • MDN Web Docs, 프로그레시브 웹 앱 소개

콘텐츠 사용 시 출처 표기 부탁 드리고, 궁금한 점이나 의견은 댓글 남겨주세요^^