프로그레시브 웹 앱의 모든 것

[1장] 프로그레시브 웹 앱스(Progressive Web Apps, PWA) 개요
1.1. Progressive Web Apps란 무엇인가?
1.2. PWA에 사용되는 핵심 기술
1.3. Web Framework(React, Angular, Vue)와 Progressive Web Apps
1.4. 강좌 구성 및 학습 방법

[2장] Progressive Web Apps 실습 진행을 위한 사전 지식
2.1. HTML
2.2. CSS
2.3. HTTP
2.4. Node.js
2.5. Javascript (Promise & Fetch)

[3장] 실습 개시 : 개발 환경 설정
3.1. Node & NPM
3.2. Code Editor
3.3. Browser 및 Chrome Development Tools

[4장] 실습 Project 미리보기 및 초기 Project Setup
4.1. 실습 project 미리보기 : PWAmarket
4.2. 초기 project 만들기 : App Shell

[5장] Android Emulator : Android Studio 설치
5.1. Android Studio 설치
5.2. Virtual Device setup

[6장] Manifest
6.1. Manifest 소개 및 Manifest Properties 자세히 알아보기
6.2. 실습 project에서 manifest file의 생성 및 사용

[7장] Service Worker 기본 : service worker를 이용한 caching
7.1. Service Worker 소개 및 Cache API
7.2. Service Worker 등록(register), 설치(install), 활성화(activate)
7.3. Service Worker와 Caching

[8장] Service Worker 심화 : 다양한 caching 전략
8.1. Service Worker에 적용 가능한 다양한 caching 전략들
8.2. Caching 전략 활용
8.3. Service Worker 전략에 Routing 사용

[9장] Deploy to real Online Server : Firebase
9.1. Firebase Server 개요 및 기본 setup
9.2. Frontend와 Backend의 연결

[10장] Indexed Database API(IndexedDB)
10.1. IndexedDB 개요 및 browser support
10.2. IndexedDB에 저장하기
10.3. IndexedDB에 저장된 data 사용하기
10.4. IndexedDB와 firebase DB의 data consistency 유지하기

[11장] Background Synchronization
11.1. Background Sync 소개
11.2. Background Sync 기능 구현 (frontend)
11.3. Background Sync 기능 구현 (backend)

[12장] Push Notifications 기본 : Displaying Notifications
12.1. Push Notifications 소개
12.2. Notification API와 Displaying Notifications

[13장] Push Notifications 심화 : Subscriptions & Push Messages
13.1. Subscriptions와 Push Notifications
13.2. Push Messages를 보내고(backend) 받기(frontend)
13.3. Notification이 Client User Action에 반응하게 만들기

[14장] Media API(Camera Control)
14.1. Media API 소개
14.2. 실습 project에 Media(Camera) 기능 도입

[15장] Geolocation API
15.1. Geolocation API 소개
15.2. Geolocation 입력 기능 구현
15.3. Geolocation 저장 기능 구현(frontend, backend)
15.4. [참고] Google API를 이용해서 실제 사용자 address 가져오기

[16장] Workbox
16.1. Workbox 및 강좌 소개
16.2. Workbox 설치와 기본 setup
16.3. 실습 project에 Workbox 적용하기
16.4. Workbox Router 개선하기 : indexedDB 연동
16.5. Background Sync와 Push Notifications 적용

[17장] Bonus : @google-cloud/storage package Version Up
17.1. @google-cloud/storage version 구분
17.2. 참고 자료
17.3. @google-cloud/storage version 변경 작업

[18장] Bonus : Minify
18.1. Minify를 위한 package 설치
18.2. 실습 Project에 uglify-js 적용

[19장] Bonus : Lighthouse
19.1. Lighthouse 소개
19.2. Lighthouse 사용

[20장] Bonus : 학습 참고 자료