PWA - Progressive Web Apps

프로그레시브 웹 앱(PWA; Progressive Web Apps)

프로그레시브 웹 앱(이하 PWA)는 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용하여 개발된 웹 앱으로 2016년 Google I/O에서 소개되었다. 구글이 말하는 PWA는 아래와 같다.

 

PWA는 최고의 웹과 최고의 앱을 결합한 경험이다. 브라우저를 통해 처음 방문한 사용자에게 유용하며, 설치가 필요하지 않다. 사용자가 PWA와 관계를 점진적으로 형성할수록 성능이 더욱 강력해 질 것이다. 느린 네트워크에서도 빠르게 로드되고, 관련된 푸시 알림을 전송한다. 모바일 앱처럼 전체 화면으로 로드되고, 홈 화면에 아이콘이 있다.

 

PWA 로고

 

네이티브 앱 vs. 웹

2014년을 기점으로 모바일 사용자 수가 데스크탑 사용자 수를 넘어서면서 네이티브 앱의 이용이 늘어났다. 네이티브 앱은 바탕화면에서 쉽게 보여 접근성이 좋고, 푸시 알림이나 카메라 접근 등 OS와 연계된 다양한 기능들을 제공할 수 있다. 그러나 설치를 해야 한다는 단점이 있다. 반면에 웹은 URL만 알고 있으면 플랫폼에 상관 없이 언제든지 접속할 수 있다. 

	네이티브 앱	웹
장점	- 설치만 하면 바탕화면에서 쉽게 접근 - 오프라인 상태에서도 동작 - 푸시 알림 등 다양한 기능 - 설치된 파일과 캐시된 데이터 사용 가능	- 설치 없이 브라우저를 통해 URL만으로 접속 - 플랫폼에 종속되지 않음
단점	- 설치 및 주기적 업데이트를 해야 하는 번거로움 - OS (iOS, Android 등)에 종속되어서 각각 개발하야 하기 때문에 많은 투자 필요 - 시간을 맞춰 동시에 출시하기가 까다로움	- 네트워크가 연결되어 있지 않을 시 사용 불가

 

PWA는 이런 네이티브 앱과 웹을 장점을 모두 갖고 있다.

 

 

PWA의 특징

• 모바일에서 브라우저를 통해 실행
• 즐겨찾기 기능으로 아이콘 설정을 하여 앱이 설치됨
• 오프라인에서도 동작
• 설치가 가능(네이티브 앱처럼 바탕화면에서 스플래쉬 스크린을 통해 실행 가능)
• 네이티브 앱처럼 캐시된 파일과 데이터를 사용하여 빠른 사용자 경험 제공
• 서버 사이드 렌더링을 제공하여 SEO에 최적
• 쉬운 동기화
• 위치 기능, 푸시 알림 등

 

 

MDN 문서

https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Introduction

프로그레시브 웹 앱 소개 - 프로그레시브 웹 앱 | MDN