PWA

 

  PWA는 Prograssive Web App의 약자로, 구글에서 제안하는 새로운 웹 개발 방법론 중 하나이다. 구글에서 PWA를 소개하는 페이지는 이 곳이다.

  전통적인 웹은 네이티브 앱과 비교를 했을 때 url을 통해 별다른 설치 없이 빠른 배포와 연결이 가능했다. 또, 많은 플랫폼에서 지원을 하기 때문에 다양한 기기에서 연결이 가능했다. 하지만, 네이티브 앱보다 UX가 뒤쳐졌으며, 느린 로딩속도를 가졌다. 또한, 웹에 한정된 기능은 사용자들에게 디메리트였다.

  하지만, 구글에서는 PWA라는 새로운 개발 방법론을 들고 나왔다. 구글에서는 웹과 네이티브 앱의 장점을 고루 가췄다고 설명했고 유연성, 속도, 접근성에 중점을 두고 있다고 했다.

  PWA는 HTML 5의 표준에서 제공하는 기능들을 이용한다. 웹 매니페스트, 서비스 워커, HTTPS, push API등을 이용하여 웹의 적은 기능을 보완하였고, 이러한 표준들을 이용하여 개발을 하게 되면 모든 브라우저들에서 지원을 하기 때문에 웹에서 가졌던 멀티 플랫폼의 장점도 가질 수 있는 것이다.

  PWA가 할 수 있는 기능들을 HTML 5 표준과 연관지어서 살펴 보자.

• 반응형
• 반응형 웹은 예전부터 널리 알려진 멀티 플랫폼 지원을 위한 웹 개발 방법이다.
• 연결 독립적
• 연결 독립적이란 뜻은 인터넷이 매우 느리거나(Lie-fi 상태), 연결이 되어 있지 않은 경우에도 캐시된 데이터를 통해 정상적인 이용을 할 수 있도록 해야한다는 뜻이다. 서비스 워커를 통해 접속한 페이지에 대한 정보를 캐싱하고, 인터넷에 문제가 생겼을 때 서비스 워커에 의해 해당 패이지를 다시 로드 할 수 있도록 한다.
• 앱 like
• 웹 매니페스트와 서비스 워커를 통해 만들 수 있는 App Shell은 Shell처럼 웹앱의 기본적인 구조가 되는 부분을 서비스 워커를 통해 캐싱하여 보여주고, 웹 매니페스트에 작성한 아이콘, 앱 메인 컬러 등을 이용해 웹앱 실행시 스플래시 이미지를 보여주는 등, 네이티브 앱에 거의 동일한 작동 방식을 유저에게 보여주는 것이다.
• 최신 상태
• 이것도 서비스 워커를 통해 구현될 수 있으며, 페이지 관리자가 페이지 업데이트를 진행하면, 서비스 워커는 페이지 로딩시에 업데이트 내역이 있는지 확인하고, 업데이트 존재 유무에 따라 다시 캐시를 할지 이전의 것을 보여줄 지를 결정한다.
• 안전
• HTTPS를 통해 가능하다. HTTPS는 HTTP의 발전된 형태로 뒤에 S는 secure의 그것이다. 서비스 워커등을 이용하기 위해선 HTTPS가 필수 이기 때문에 PWA는 HTTPS에서 구현 될 수 있다.
• 검색 가능
• 웹 매니페스트는 우리가 옷을 사기 전에 라벨을 보고 이 옷에 대한 정보를 대략 파악 할 수 있듯,  구글과 같은 검색엔진이 봇을 통해 페이지의 정보를 수집할 때 참고 할 수 있는 라벨 같은 것이다.
• 재참여 가능
• 서비스 워커를 통해 구현될 수 있는 기능 중에 Push Notification이 있는데, 이것을 통해 페이지 관리자가 페이지 업데이트 혹은 페이지에서 이벤트를 하게 된다면, 카톡이나 모바일 게임 같은 것과 동일하게 알림을 보내 다시 웹앱에 접근 할 수 있도록한다.
• 설치 가능
• 웹 매니페스트에 아이콘의 위치와 크기, 시작 url, 스플래시 화면등을 등록하게 되면, 서비스 워커를 통해 바탕화면에 웹앱에 접속할 수 있는 아이콘을 만들어주고 그것을 통해 접속하게 되면 스플래시 화면을 보여주고 등록된 시작 url로 웹앱이 시작하게 된다.
• 링크 연결 가능
• 기본적으로 웹이기 때문에 브라우저를 통해 url로 접속할 수 있다.

  앞서 설명했던 PWA에서 사용되는 기능에서 가장 많이 사용되는 표준은 서비스 워커와 앱 쉘, 웹 매니페스트가 있는데 그것에 대해 설명해보겠다.

Service Worker

  브라우저가 백그라운드에서 실행하는 스크립트로 앞쪽에서 작동되는 웹페이지와는 별개로 동작한다. 페이지 동기화같은 캐싱이나 푸시 메시지를 동작할 수 있게 한다. 

App Shell

  앱 쉘은 웹 앱의 기본적인 UI를 구성하는 HTML, CSS, Javascript를 캐싱해놓고, 인터넷의 상태가 좋지 않을 때에도 오류 페이지를 보내지 않고 캐싱해두었던 기본 UI를 보여주면서 사용자에게 네이티브 앱을 사용하는 느낌을 주도록한다.

Web Manifest

  웹 매니페스트는 브라우저가 웹 앱을 PWA라고 인식할 수 있는 기본 설정  파일이다. 앱의 기본 컬러라던지, 앱의 아이콘, 앱의 타이틀, 시작 url, 앱의 방향 등을 설정할 수 있다. 브라우저는 이 매니페스트 파일을 가지고 해석을 하면서, 브라우저가 PWA에 대한 준비를 할 수 있게 한다.