Google I/O 2016에서 구글은 PWA(Progressive Web Apps)라는 신기술을 소개했습니다. 신기술이라고해서 없던 기능이 나온 것은 아니고 여러가지 있던 기능이나 이론을 조합하여 앱과 웹의 장점을 합친 것이라고 볼 수 있습니다.
PWA란 무엇인가?
PWA에 대해 이렇다 저렇다 여러 정의들이 있지만 쉽게 생각하면 아래와 같습니다.
인터넷 웹사이트의 파일들(html, javascript, css, images같은..)을 컴퓨터에 잘~ 저장(캐싱)해 놨다가 다시 요청이 올 때 저장(캐싱)된 파일들을 먼저 보여주고 필요할 떄 웹서버에 있는 데이터를 받아서 보여주는 기술과 홈스크린에 바로가기 아이콘을 설치 할 수 있게 하는 기술, 그리고 서버의 소식을 클라이언트에 전하는 Push기술 입니다.
PWA를 통해서 사용자는 모바일 앱과 같은 사용자 경험을 누릴 수 있으며 모바일 푸시, 오프라인이나 저속의 네트웍 속도에서의 사용, 무엇보다도 HTML, JAVASCRIPT, CSS를 이용하여 구현할 수 있습니다.
PWA특징
App스러움
PWA의 특징이라면 App스러움이라고 할 수 있습니다. 마치 App처럼 홈스크린에 아이콘을 설치하여 APP처럼 쉽게 바로가기를 실현할 수 있습니다.
Push 메시지 기능
App의 중요 특징 중 하나인 Push가 가능하다는 것입니다. 원래 웹은 클라이언트에서 서버로 요청이 있어야만 결과물을 보내주는 형태로 구현이 되는데 Push는 반대로 클라이언트의 요청이 없더라도 서버의 필요에 의해서 클라이언트에게 데이터를 보낼 수 있는 기능입니다. 보통 쪽지나 Notice형태로 제공됩니다.
Offline 접속 기능
PWA가 캐싱이 되기 때문에 Offline이거나 속도가 느린 상태에서도 미리 다운로드 되어 있는 정보를 계속 볼 수 있습니다.
보안
PWA는 HTTPS에서만 사용이 가능하기 때문에 일반 인터넷 데이터에 비해 보안이 강화된 상태라고 할 수 있습니다.
PWA 제작 기술
PWA를 구현하기 위해서는 크게 manifest.json과 Service Workers라는 2가지의 기술이 필요합니다.
manifest.json
manifest.json은 설치할 때 아이콘은 무얼 사용하고 아이콘을 눌렀을때 접속할 페이지는 무엇인지, 배경색은 무슨색으로 할 것인지 등등..에 대한 설정파일이라고 보시면 됩니다.
service-worker
Service Workers는 PWA의 핵심으로 캐싱은 어떻게 할 것인지 요청시 캐시를 먼저 보여줄지 웹서버를 통해서 먼저 보여줄지, push 등등에 대한 프로그래밍하는 기술입니다. PWA의 거의 80%에 해당하는 기술이라고 보시면 됩니다.
