http://makestory.net/media/#/view/456

1. Progressive
유성민
Web
Apps
http://makestory.net

2. Web
인터넷에 연결된 컴퓨터들을 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.

3. Web
멀티플랫폼 즉시반영
손쉬운 공유(URL)손쉬운 접근
검색엔진
다양한API
유동적 레이아웃
자유로움
온라인 필수
네트워크 환경 영향/성능보안

4. [출처] http://adaptivepath.org/ideas/ajax-new-approach-web-applications/
2005년 James Garrett 블로그 글, Ajax 등장/촉발

5. 2007.01.09 아이폰 등장

6. App플랫폼 제한
즉각 반영 어려움
속도/성능
오프라인 대응
하드웨어 접근
푸시(참여유도)
검색엔진
보안
홈스크린(설치)

7. [출처] https://alistapart.com/article/responsive-web-design
2010년 Ethan Marcotte 블로그 글, 저서를 통해 ‘반응형 웹 디자인’ 용어사용

8. [참고] http://hacks.mozilla.or.kr/2012/07/relationship-between-whatwg-html-living-standard-and-w3c-html5-spec/
2014년 10월 HTML5 표준안 확정
WHATWG
W3CAPI

9. [출처] https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
2015년 “Progressive Web Apps: Escaping Tabs Without Losing Our Soul“ 이라는 블로깅으로 촉발

10. 2015년,
구글 크롬의 엔지니어 Alex Russell 이 고안한 개념(모습)
앱 수준으로 점차 발전해나가는 웹을 지향
궁극적으로는 앱 수준의 사용자 경험을 웹에서 제공하는 것이 목적
‘프로그레시브 웹 앱스(Progressive Web Apps. PWA)’
PWA의 등장

11. Web App
사용자 경험

12. 특성(모습)
PWA
• Responsive to fit any form factor
모바일, 데스크탑, 테블릿 등 반응형 제공
• Connectivity independent Progressively-enhanced with Service Workers to let them work offline
오프라인, 느린 네트워크에서도 작동
• App-like-interactions Adopt a Shell + Content application model to create appy navigations & interactions
앱 처럼 반응할 수 있을 것(모델)
• Fresh Transparently always up-to-date thanks to the Service Worker update process
최신 상태(컨텐츠 등) 유지할 수 있을 것
• Safe Served via TLS (a Service Worker requirement) to prevent snooping
안전을 보장
• Discoverable Are identifiable as “applications” thanks to W3C Manifests and Service Worker registration scope
allowing search engines to find them
검색엔진을 통해 검색 가능
• Re-engageable Can access the re-engagement UIs of the OS; e.g. Push Notifications
설치 가능하고, 비활성화 상태에서도 푸시알림 통해 재참여 가능할 것
• Linkable meaning they’re zero-friction, zero-install, and easy to share.
URL을 통해 공유되고, 복잡한 설치가 불필요할 것
[출처] https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
[참고] https://codelabs.developers.google.com/codelabs/your-first-pwapp/

13. 기술(API)
PWA
• Responsive: CSS3, flex 등 현재 사용되는 대부분의 많은 responsive 기술들
• Connectivity: Service Worker, HTML5 offline , pouchDB, IndexedDB
• App-like-interactions: Web App Manifest, web cache, App Shell Model
• Fresh: Service Worker
• Safe: https
• Discoverable: Web App Manifest, Service Worker
• Push Notification: Push API on Web (Notifications API)
• Installable: Manifest Web App install banner
• Linkable: URL
[출처] https://m.post.naver.com/viewer/postView.nhn?volumeNo=14929344&memberNo=36733075

14. 기술(API)
PWA
웹 단점보완

15. Web App Manifest
PWA
[참고] https://developers.google.com/web/fundamentals/app-install-banners/?hl=ko
<link rel="manifest" href="/test/manifest.webmanifest">

16. Service Workers
PWA
[App Shell 아키텍처] https://developers.google.com/web/fundamentals/architecture/app-shell?hl=ko
application (web page) service worker
cache
network

17. Push API
PWA

18. Notification API
PWA
[출처] https://www.goodbarber.com/blog/web-push-notifications-demystified-a866/

19. https://makeapi.net/test/pwa.html
Demo
PWA
[사례 별첨참고]
[참고] 소스코드에 주석으로 자세히 설명

20. 브라우저 지원
PWA
[출처] https://blogs.windows.com/msedgedev/2018/02/06/welcoming-progressive-web-apps-edge-windows-10/

21. 브라우저 지원
PWA
[출처] https://www.monterail.com/blog/pwa-for-apple-ios

22. 브라우저 지원
PWA
[출처] https://vaadin.com/pwa/learn/browser-support
[출처] https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa?hl=ko

23. HTML5 API
시사점

24. 시사점

25. 감사합니다.
http://makestory.net