PWA이란?
PWA는 웹 플랫폼 기술을 사용하여 구축되었지만 플랫폼별 앱과 같은 사용자 경험을 제공하는 앱이다.
플랫폼별 앱?
플랫폼별 앱은 iOS나 Android 같은 특정 운영 체제용으로 개발되며, 해당 플랫폼의 SDK를 사용한다. 사용자들은 이 앱들을 플랫폼의 앱 스토어에서 다운로드하여 설치한다. 설치된 앱은 기기에 영구적으로 추가된 기능처럼 보이는 특징이 있다.
SDK?
SDK(Software Development Kit)는 소프트웨어 개발자가 특정 플랫폼이나 운영 체제용 애플리케이션을 개발할 때 사용하는 도구와 라이브러리의 집합이다.
플랫폼별 앱, 웹사이트, PWA의 이점
플랫폼별 앱의 이점
- 사용자가 쉽게 접근할 수 있음
- 오프라인 및 백그라운드 작동
- 전용 UI
- OS 통합
- 앱 스토어 통합
전통적인 웹사이트 이점
네트워크 연결에 크게 의존하지만
- 코드베이스 : 다양한 운영 체제 및 장치 클래스에서 실행될 수 있다.
- 웹을 통한 배포 : 앱스토어에 가입할 필요 없이 웹사이트를 배포할 수 있다.
에 대한 장점이 있다.
PWA의 이점
플랫폼별 앱, 전통적인 웹사이트의 이점을 합체한 것이라고 생각하면 된다.
PWA와 브라우저
웹사이트
- 환경: 브라우저에서 실행됨.
- UI: 브라우저 UI 포함 (뒤로/앞으로 버튼 등).
- 기술적 측면: 웹사이트로서 브라우저 엔진 필요.
PWA
- 보이는 모습: 플랫폼별 앱처럼 보임.
- 환경: 주변에 브라우저 UI 없이 표시되지만, 기술적으로는 웹사이트.
- 실행 및 관리: 브라우저 엔진이 필요하며, 백그라운드에서 동작.
플랫폼별 앱
- 보이는 모습: 운영 체제에 맞춘 네이티브 앱.
- 환경: 플랫폼 OS에서 관리 및 실행.
- 기술적 측면: 특정 플랫폼의 SDK와 도구 사용.
런타임 환경 비교:
- 웹사이트: 브라우저에서 실행, 브라우저 UI 포함.
- PWA: 브라우저 엔진 필요, 플랫폼별 앱처럼 보이나 웹사이트 기술적 측면.
- 플랫폼별 앱: 네이티브 앱으로 특정 플랫폼에 최적화된 환경 제공.
PWA의 기술적 특징
HTML, CSS, JavaScript
PWA는 기본적으로 웹 기술을 사용하여 구현된다. 최소한 하나의 HTML 페이지를 통해 콘텐츠를 표시하고, CSS를 사용하여 스타일링을 적용하며, JavaScript를 사용하여 동적인 기능을 구현할 수 있다.
전역 Window 객체와 웹 API
페이지에 로드된 JavaScript는 전역 Window 객체를 통해 웹 브라우저의 다양한 웹 API에 접근할 수 있다. 이를 통해 PWA는 웹 브라우저 기반의 다양한 기능을 활용할 수 있다.
웹 앱 매니페스트 파일
사용자가 PWA를 설치할 때 필요한 정보를 담고 있는 JSON 형식의 파일이다. 이 파일은 앱의 이름, 아이콘, 시작 URL 등의 메타데이터를 정의하여 브라우저가 설치 프로세스를 관리하고 사용자 인터페이스에 표시하는 데 사용된다.
서비스 워커
PWA의 중요한 구성 요소로, 백그라운드에서 실행되는 스크립트이다. 서비스 워커는 네트워크 요청을 가로채고 관리하여 오프라인에서도 콘텐츠를 제공하거나 빠르게 캐싱된 콘텐츠를 제공할 수 있다. 이를 통해 PWA는 기본적인 오프라인 경험을 제공할 수 있다.
참고
https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
