PWA(Progressive Web App)란? + 적용하는 방법

Google I/O 2016에서 구글은 PWA(Progressive Web Apps)라는 신기술을 소개했습니다.

신기술이라고 해서 없던 기능이 나온 것은 아니고 여러가지 있던 기능이나 이론을 조합하여 앱과 웹의 장점을 합친 것이라고 볼 수 있습니다.

 

PWA(Progressive Web App)란?

: 인터넷 웹사이트의 파일들(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가지의 기술이 필요합니다.

• mainfest.json
  : manifest.json은 설치할 때 아이콘은 무얼 사용하고 아이콘을 눌렀을때 접속할 페이지는 무엇인지, 배경색은 무슨색으로 할 것인지 등등..에 대한 설정 파일이라고 보시면 됩니다.
• service-worker
  : Service Workers는 PWA의 핵심으로 캐싱은 어떻게 할 것인지, 요청 시 캐시를 먼저 보여줄지 웹서버를 통해서 먼저 보여줄지, push 등등에 대한 프로그래밍 하는 기술입니다. PWA의 거의 80%에 해당하는 기술이라고 보시면 됩니다.

출처

https://uxgjs.tistory.com/224

PWA(Progressive Web Apps)란 무엇이고 장단점은 무엇인가

 

참고 영상

https://www.youtube.com/watch?v=FEBkne7Nyu4&list=WL&index=47 

https://www.youtube.com/watch?v=NMdnzvPsGu8 

https://developers.google.com/codelabs/pwa-training/pwa03--going-offline#0

Progressive Web Apps: Going Offline  |  Google Developers