PWA 란
Progressive Web APP의 약자로,
네이티브 앱과 같은 사용자 경험을 주는 새로운 웹 앱.
더 나아가, 기존의 웹이 할 수 없었던,
오프라인 서비스가 가능해짐.
Slide 3
Slide 3 text
PWA의 기반 기술
Manifest.json
Slide 4
Slide 4 text
W3C Web Manifest
Manifest.json
웹 앱의 자원과 모습(스플래시 등)을
브라우저에게 알려주는 역할.
PWA 뿐만 아니라 모든 웹 앱에서 사용 될 수 있음. (옵션)
PWA에서는 필수!
Slide 5
Slide 5 text
Service Worker
PWA를 실현시켜주는 주요 기술!
웹 앱의 자원을 캐슁해주고,
Push 이벤트를 받아옴!
Slide 6
Slide 6 text
PWA의 특징
1. 빠르다. (웹의 모든 자원을 캐시하기 때문)
2. 유연하다. (클릭 한번으로 네이티브 환경에 설치, 오프라인, Push 지원)
3. 비용이 적다. (개발 비용이 적음)
Slide 7
Slide 7 text
PWA의 구현
Step – 1. sw.js 작성
Slide 8
Slide 8 text
PWA의 구현
Step – 2. manifest.json 작성
Slide 9
Slide 9 text
PWA의 동향
- 지원 브라우저
- Web Notification/Push
Slide 10
Slide 10 text
PWA 기반 서비스
https://pwa.rocks/
Slide 11
Slide 11 text
PWA의 동작
https://latest-web-tech.herokuapp.com/
아래의 링크에서 확인가능~!
Slide 12
Slide 12 text
PWA On Webpack
PWA 개발에 Webpack을 적용시
간소화된 번들 파일 덕분에 PWA 구성이 쉬웠다.
심지어 Manifest나 App Cache Index를
Webpack Plugin이 자동으로 생성해준다.
추천 플러그인 (published on npm)
- Serviceworker-webpack-plugin
- Webpack-manifest-plugin
Slide 13
Slide 13 text
PWA 실습 환경 추천
위 서비스들은 https가 기본적으로 구축되어 있기 때문에
PWA를 쉽고 빠르게 테스트해볼 수 있다.
Slide 14
Slide 14 text
PWA 관련 문서
1. 구글 CODE LABS
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ko
2. MDN Docs
https://developer.mozilla.org/ko/docs/Apps/Progressive
3. MDN pwa-examples
https://github.com/mdn/pwa-examples
Slide 15
Slide 15 text
링크
- Github
https://github.com/tinyjin/latest-web-tech
- PWA Example Site
https://latest-web-tech.herokuapp.com/