PWA(Progressive Web App)는 구글의 주도하에 웹(Web)에서 앱(App) 수준과 같은 사용자 경험을 제공하기 위해 만들어 졌다.
PWA는 웹과 앱의 장점을 적절히 가자고 있다고 볼 수 있다. PWA는 웹을 통해서 바탕화면에 앱처럼 아이콘을 설치 할 수 있고, 아이콘으로 접속하면 앱 처럼 전체 화면을 사용 할 수 있게 된다. 그리고 앱의 푸시알림 기능도 사용 가능 하며, 필수 리소스를 캐싱 하여 오프라인 모드를 지원 할 수 있다.
PWA 특징
아이콘 설치 : 앱 스토어 방문 없이 웹을 통해서 바탕화면에 아이콘 설치가 가능하다.알림 : 푸시 알림 기능이 사용 가능 하다.독립성 : 서비스워커(service worker)를 사용하여 오프라인과 느린 네트워크에서 작동한다.보안 : HTTPS로 제공되어 스누핑 차단이 되며, 컨텐츠가 변조되지 않게 한다.프로그레시브 : 모든 브라우저에서도 동일하게 동작 한다.반응형 : 모든 폼(데스크톱, 모바일, 태블릿)에 맞다.앱과 유사 : 앱 스타일로 구현 되어 전체 화면 사용이 가능 하다.최신 상태 : 서비스워커 업데이트 덕분에 항상 최신 상태로 유지 된다.검색 노출 : 매니페스트(manifest) 및 서비스 워커 등록 범위 덕분에 앱으로 식별되어, 검색 엔진 노출이 가능하다.공유 : URL을 통해 쉽게 공유할 수 있다.
오프라인 동작
서비스 워커를 통해서 정적 데이터를 캐싱 할 수 있어서 오프라인 상황에서도 사용이 가능하다. 하지만 오프라인에서 정상 동작 한다기 보다 캐싱되어 있는 리소스 만으로 동작 가능한 것 처럼 보이는 것이다.
PWA 지원 확인
크롬(Chrome)에서 라이트하우스(Lighthouse) 도구를 사용하면 해당 웹사이트가 PWA를 얼만큼 지원하는지 확인 할 수 있고, 웹사이트의 성능과 개선 할 점에 대해서도 파악 할수 있다.
PWA 테스트
아래 링크는 Google에서 제공하는 PWA 문서로 실제로 코드를 삽입해 보면서 PWA가 어떻게 동작 하는지 테스트 해 볼 수 있다.
MS와 Google은 PWA관해서 지속적으로 협력하고 있고 전체 브라우저 사용자 60%이상을 차지하고 있는 크롬에 비추어 보면 PWA 도입에 관심을 가져 볼만 하다. 반면 Apple ios에서는 웹 푸시와 같은 기능을 아직 지원하지 않고 있다.
