PWA(progressive web app)
PWA는 우리 모두가 알고 있고 좋아하는 HTML, CSS, 자바스크립트(JavaScript)와 같은 웹 기술로 만드는 앱이다.
스마트 폰의 시대가 시작되면서 네이티브 앱(native app)도 같이 부상했다. 하지만 네이티브 앱을 개발하고 유지 보수하는 것이 복잡할 때 사용할 수 있는 방법이 프로그레시브 웹 앱(progressive web app)이다.
네이티브 앱과의 차이
네이티브 앱은 일반적으로 플랫폼의 특화된 언어로 만든다. (ex.안드로이드-Java ,ios-Swift)
하지만 이는 특정 플랫폼에서만 가능하므로 이를 보완하기 위해 PWA를 사용할 수 있다.
PWA는 일단 홈 화면에 저장되면 브라우저에서 실행되며, 네이티브 앱처럼 동작한다.
PWA은 반응형으로 동작할 수 있고, 출시를 위한 프로세스를 거치지 않아도 되는 장점들이 있다.
그런데도 PWA의 한계가 있으므로 네이티브 앱을 사용하기도 한다.
PWA의 사용
PWA는 기본적으로 웹(web)이 중심이다.검색엔진으로 쉽게 찾을 수 있다. 따라서 SSR사용하는 것이 좋다.
PWA를 설정
-
보안 연결(HTTPS): PWA는 신뢰할 수 있는 연결 상태에서만 동작하기 때문에, 보안 연결을 통해서 서비스를 제공해야 한다. -
서비스 작업자(service worker): 서비스 작업자는 백그라운드에서 실행되는 스크립트입니다. -
매니페스트 파일(manifest file, 설정 파일): 이것은 제이슨(JSON, 용량이 적은 데이터를 교환하기 위한 형식) 파일이며, PWA가 표시되고 기능하는 방식에 대한 정보들이 포함된다.
매니페스트 파일의 간단한 예
{
"short_name":"Weather",
"name":"Weather: Do I need an umbrella?",
"description":"Weather forecast information",
"icons":[
"src":"/images/icons-192.png",
"type":"image/png",
"sizes":"192x192""src":"/images/icons-512.png",
"type":"image/png",
"sizes":"512x512""start_url":"/?source=pwa",
"background_color":"#336706",
"display":"standalone",
"scope":"/",
"theme_color":"#336706"
}start-url: 앱이 시작되어야 하는 위치
display: 보여주고 싶은 브라우저 UI의 타입.
fullscreen(전체 화면), standalone(스탠드얼론, 네트워크에 연결되지 않은 상태에서도 스스로 동작할 수 있는 것), minimal-ui(최소화된 UI), the standard browser interface(브라우저 표준 인터페이스)가 있다.
PWA로 구현 기능 및 효과
- 등록 및 주문, 결제, 연락처 등의 원활하게 구축
- 푸시 알람
- 아이콘을 홈 화면에 추카
- 설치 불필요
- 페이지 표시 속도 향상(프리캐시 기능으로 네트워크의 품질과 관계없이 빠르게 표시)
- 오프라인 열람 기능
- 자유도 높은 개발
출처
