PWA란?
PWA는 Progressive Web App의 약어로, 웹 애플리케이션의 기능과 사용자 경험을 앱과 유사하게 제공하는 기술입니다. 이를 통해 모바일 앱과 웹 사이의 중간 형태인 "모바일 웹 앱"을 개발할 수 있습니다.
PWA의 장점
- 오프라인에서도 동작합니다. 서비스워커(Service Worker)를 사용하여 캐싱과 같은 기능을 구현하면, 네트워크 연결이 없는 상황에서도 앱과 유사한 사용자 경험을 제공할 수 있습니다.
- 앱스토어를 거치지 않고 설치할 수 있습니다. 웹 어플리케이션 매니페스트(Manifest)와 서비스 워커를 이용하여, 모바일 기기의 홈 화면에 바로 추가할 수 있습니다.
- 반응형 디자인으로 모바일과 데스크톱에 모두 적합합니다. 모바일 앱과 같은 사용자 경험을 제공하면서, 다양한 기기와 브라우저에 대응하는 반응형 디자인을 구현할 수 있습니다.
PWA 아키텍처
PWA는 크게 세 가지 기술로 구성됩니다.
- 웹 어플리케이션 매니페스트(Manifest)
웹 어플리케이션 매니페스트는 웹 앱의 메타 데이터를 정의하는 JSON 파일입니다. 웹 앱의 이름, 아이콘, 테마 색상 등을 정의할 수 있습니다.
- 서비스 워커(Service Worker)
서비스 워커는 백그라운드에서 실행되는 자바스크립트 파일로, 웹 앱과 브라우저 간에 중개자 역할을 합니다. 캐싱과 같은 네트워크 기능을 구현하여, 오프라인에서도 웹 앱이 동작할 수 있습니다.
- 앱 셸(App Shell)
앱 셸은 웹 앱의 핵심 UI 요소를 캐싱하여 오프라인 상황에서도 빠르게 로딩할 수 있는 구조입니다.