pwa의 기본적인 설명입니다.

1. PWA

2. PWA란

3. PWA란
전통적인 웹의 장단점
URL의 빠른 배포, 연결
표준 기반의 다양한 기기 지원
네이티브 앱 대비
뒤쳐지는 UX
느린 로딩 속도
적은 기능

4. PWA란
PWA는 웹과 네이티브 앱의 장점을 가지는 새로운 기술
유연성, 속도, 접근성에 중점을 두고 있다
PWA( Prograssive Web App )

5. PWA란
프로그레시브
반응형
연결 독립적
앱 like
최신 상태
안전
검색 가능
재참여 가능
설치 가능
링크 연결 가능
PWA의 특징
App Shell
Service Worker
Push Notification
Web Manifest
Https

6. PWA란
브라우저가 백그라운드에서 실행하는 스크립트
웹페이지와는 별개로 동작
푸시 알림, 백그라운드 동기화같은 기능을 지원
Service Worker

7. PWA란
UI를 구성하는 최소한의 HTML, CSS, Javascript
네이티브 앱과 유사한 상호작용 가능
App Shell

8. PWA란
브라우저가 PWA를 인식하기 위한 기본 설정 파일
Web Manifest

9. PWA란
What Web Can Do Today?

10. 왜 PWA인가

11. 왜 PWA 인가
HTML 5 표준

12. 왜 PWA 인가
HTML 5 표준

13. 왜 PWA 인가
유저 접근성 (랑콤)
페이지 전환율 17% 증가
모바일 접근율 53% 증가
푸시 알림을 통해 장바구니에 담긴 항목 8% 증가

14. 왜 PWA 인가
데이터 최적화 (Twitter Lite)
Android 앱 다운로드 크기 : 23.5 MB
PWA 다운로드 크기 : 600KB
타임라인 스크롤시 데이터 소비를 70%까지 줄일 수 있었다.

15. 왜 PWA 인가
성능 (워싱턴 포스트)
7일간 재방문율 23% 증가
88%의 로딩 속도 증가

16. 왜 PWA 인가
https://pwa.rocks/