새로운 웹의 미래, 프로그레시브 웹 앱이란?

Progressive Web App (이하 PWA로 표기)

• 웹사이트와 모바일앱의 장점을 취하는 새로운 앱 생명주기 모델을 가진 웹 애플리케이션
• 본질은 모바일 웹이지만 마치 앱을 사용하는 듯한 사용자 경험
  • 앱은 스토어에서 업데이트를 받아야 하는 부담이 존재하지만, PWA는 기본적으로 웹이기 때문에 배포 및 다운로드에 대한 부담이 없음
• 웹과 앱의 장점을 가짐 (전부는 아니겠지만)
  • 웹 : 원하면 요청할 수 있는 권한 모델 등
  • 앱 : 홈 화면에 추가하거나 알림 등을 사용 가능
• 전통적인 웹 및 웹앱에 비교해서 더 나은 사용자 경험(UX)를 제공할 수 있음

긍정적인 사례

• 실제 적용한 PWA앱에서 (Flipkart, 워싱턴포스트) 사이트의 성능 개선 및 UX의 증가로 인하여
  • 사용자가 머무는 시간이 약 104% 증가
  • 세션 당 74%의 시간을 더 보냄
  • 참고 : http://byline.network/2016/05/1-169/

특징

※ 전부는 아니고, 개인적으로 인상적이었던 특징들

• 빠른 로딩 : 네트워크 환경이 안좋은 상황 (심지어는 오프라인)에서도 사용자가 빠르게 앱 로딩을 할 수 있음
• 홈스크린에 추가 : 브라우저에서 바로, 빠르고 간결한 동작으로 홈스크린에 앱을 설치할 수 있음
  • 이를 통하여 사용자의 재방문율을 높임
  • 참고 : 스팸으로 보이지 않기 위해 첫 방문 시에는 시도하지 않는다.
• 알림 제공 : 브라우저가 닫혀 있더라도, 푸시를 제공 할 수 있어야 함 (재방문율을 높일 수 있음)
  • ex : 페이스북에서 새로운 소식이 오면 (누군가가 like를 눌렀다던가) 브라우저가 닫혀 있어도 핸드폰에는 알림이 뜬다.
• 안전함 : 스누핑을 방지하기 위해 HTTPS 에서만 동작
  • Service Worker는 네트워크 요청을 가로채고 조작할 수 있으므로 중간자 공격을 방지하기 위함
• 사용자의 재방문율 :  OS의 UI를 활용하여 사용자가 사이트를 다시 방문할 수 있도록 한다.
  • 예 : push 알림
  • 참고 : 원문에는 (Re-engageable : 다시 사로 잡기)로 되어 있음

어떻게 만드는가?

구글이 제공하는 2가지

1. App Shell (Application Shell architecture)
   • PWA을 제공하기 위해 최소한으로 요구되는 HTML, CSS, JS
   • App과 같이 보여주고, 빠른 로딩을 도와준다. (스피드에 포커싱되어 있다.)
   • Shell(조개)라는 말처럼 앱의 껍데기이며 관련된 파일만 로컬에 캐싱해놓아서 컨텐츠가 로딩 될 때에 그 안에 렌더링 해준다.
2. Service Worker
   • 브라우저에서 제공해주는 자바스크립트 (Worker)
   • 웹에서 네이티브 앱과 같은 동작을 재현하기 위한 기술적 기반을 제공

Web App Manifest 파일

• Native와 동일한 앱 접근성을 구현하기 위한 설정 목록을 가진 파일
  • 웹앱이 가져야 할 설정(아이콘, 배경색, 이름 등)을 가지고 있음
• 페이지에 link 태그를 추가하여 적용 가능
  • <link rel="manifest" href="/manifest.webmanifest">

예시

1. 탭에서 생명주기를 시작
2. 사용자가 해당 사이트를 자주 방문하면 홈화면에 등록할 것인지를 묻는 알림이 나타남
   • 수락하더라도 사용자의 사용 흐름을 중단하지 않음
3. 전체화면으로도 실행 가능

참고

• http://han41858.tistory.com/13