2. 2015년 6월 Alex Russell이 Google 개발자 컨퍼런스에서 제안합니다.
프로그레시브 웹앱: 우리의 영혼을 잃지
않고 탭에서 벗어나기
#슬라이드쇼 상태에서 클릭하시면 해당 페이지로 이동합니다.
3. Alex Russell
이 앱(프로그레시브 웹앱)은
패키징 처리되지 않고 앱스토어를 통해
배포되지 않으며 기존 웹사이트를 기반으로 움직입니다.
이 프로그레시브 웹앱은 점차 “앱”이 되어 간다고
보시면 됩니다.
#슬라이드쇼 상태에서 클릭하시면 해당 페이지로 이동합니다.
4. 모바일웹은 도달율은 높지만 참여도(engagement)가 낮다는 것이 이미 알려진 사실입니다
월간 순 방문자수 방문자당 평균 머무르는 시간
모바일앱 모바일웹
상위 100개의 모바일웹과 모바일앱 비교(comScore Mobile Metrix, U.S., Age 18+, June 2015)
5. 왜냐하면 모바일 웹사이트는
네이티브 어플리케이션보다 현저히 느리며,
터치 인터랙션(제스쳐)의 제약 등으로 인해 필요한 정보획득은 가능하더라도
사용자경험의 질이 떨어지며,
하드웨어 기능에 대한 접근도 어렵습니다.
7. 프로그레시브 웹 앱(Progressive Web App)은 아래의 특징이 있습니다.
빠르다.
단 한번의 클릭으로 콘텐츠 접근이 가능하다.
부드러운 애니메이션과 매끄러운 내비게이션으로 동작한다.
웹 푸시로 참여도를 높일 수 있다.
불안정한 네트워크에서도 좋은 경험을 제공할 수 있다.
모든 브라우저에서 일관적인 사용자 경험을 제공할 수 있다.
8. 프로그레시브 웹앱은 모바일 웹사이트와 모바일 어플리케이션에서 진화한
새로운 접근방식이며
모바일 사용자 경험의 장점과 모바일 웹브라우져의 특징을 결합한
새로운 어플리케이션 모델입니다.
9. 프로그레시브 웹 앱은 이렇게 구성되어 있습니다.
캐시된 쉘은 재 방문 시 즉시 로드됩니다.
속도에 포커싱되어 있습니다.
동적인 내용이 뷰를
채우게됩니다.
1
10. 프로그레시브 웹 앱은 이렇게 구성되어 있습니다.
자바 스크립트로 작성된 클라이언트 측 프록시
웹에서 네이티브 앱과 같은 동작을 재현하기 위한
장치기능 액세스
네이티브앱과 동일한 앱 접근성을 구현하기 위한 설정
목록을 가진 파일
디바이스 홈스크린에 추가될 앱 아이콘 설정
풀스크린 모드 설정(standalone or fullscreen)
디바이스 회전에 따른 세로/가로모드 설정
인트로 이미지 설정
백그라운드/테마(System Status 영역 등) 색상 설정
2 3
15. [특징3] 기존 모바일웹과 차원이 다른 부드럽고 빠른 내비게이션을 제공합니다.
3G 네트워크 환경에서 첫 방문 시 10초 이내로 페이지를
로드합니다.
페이지 재방문 시 500 밀리세컨트 이내로 페이지를 로드
합니다.
초당 60 프레임을 스크롤할 수 있습니다.
이미지가 로드되는 동안 컨텐츠가 점프되지 않습니다.
16. [특징4] Web Push를 발송할 수 있습니다.
기존 어플리케이션 푸시와 마찬가지로 푸시 메시지를
발송할 수 있습니다.
프로그레시브 웹앱이 닫힌 상태에서도 마찬가지로 푸
시 수신이 가능합니다.
18. 프로그레시브 웹앱의 표준기술은 최신버전의 모든 브라우저에서 작동시킬 수 있습니다.
하지만 Service Worker는 현재는 크롬, 오페라, 파이어폭스에서 사용할 수 있으며 마이
크로소프트의 웹브라우저(in development)와 애플의 웹브라우저(under consideration)
에도 곧 적용될 예정입니다.
[특징5] 프로그레시브 웹앱은 다양한 모바일웹 브라우저에서 동작합니다.
19. [특징5] 그중 크롬 모바일웹 브라우저는 타사대비 앞서나가고 있죠.
구분 Chrome
(Ver 55.0.2883.91)
Chrome
(ver 56.0.2924.79)
Safari
(ver XXXXXXXX)
Native Behaviors
Local Notifications
Push Messages ●
Foreground Detection ● ● ●
Permissions ●
Seamless Experience
Offline Mode ●
Home Screen Installation
Background Sync ●
Inter-App Communication
Input
Touch Gestures ● ● ●
Speech Recognition ●
Clipboard(Copy&Paste) ● ● ●
Pointing Device Adaptation ●
Surroundings
Bluetooth 구현중
NFC 구현중
Proximity Sensors 구현중
Ambient Light 구현중
Camera & Microphone
Audio & Video Capture ●
Advanced Camera Controls
Recording Media ●
Real-Time Communication ●
Location & Position
Geolocation ● ● ●
Geofencing
Device Orientation ● ● ●
Device Motions ● ● ●
Device Feature
Network Type&Speed ●
Online State ● ● ●
Vibration ●
Bettery Status ●
Screen & Output
Fullscreen ●
Screen Orientation&Lock ●
Wake Lock
Presentation Features ●
Operating System
Offline Storage ● ● ●
File Access ● ● ●
Contacts
Storage Quotas ●
20. 앱스토어 로드
어플리케이션 검색
설치 선택
사용자정보 접근 설정
다운로드 진행
사용
[특징6] 앱스토어를 통한 앱 설치보다 사용자의 접근성/편의성이 우수합니다.