Progressive Web App의 기초부터 고급 기술까지!

실습 프로젝트를 만들면서 Progressive Web App의 기초부터 고급 기술까지, 한 권으로 마스터한다!

◆ 실습에 필요한 핵심 사전 지식도 제공합니다. : HTML, CSS, HTTP, Node.js, Javascript (Promise & Fetch) ◆ 실습과 관련된 각종 Tool의 설치 과정부터 사용 방법까지 포함했습니다. ◆ Progressive Web App의 다양한 기능들과 그 동작 원리에 대해서 자세히 설명합니다. ◆ 이해하기 어려운 개념들은 별도로 알기 쉽게 정리합니다. ◆ 단순히 따라 하는 실습에 그치지 않고 학습 후 스스로 실무에 적용할 수 있는 능력을 갖추게 해 드립니다. ◆ 복잡한 Code도 최대한 단순화해서 쉽게 설명합니다.

[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 : 학습 참고 자료

- Progressive Web App의 기초부터 고급 기술까지, 한 권으로 마스터한다!Progressive Web Apps(프로그레시브 웹 앱스, PWA)는 최근 빠른 속도로 인기가 높아지고 있는 IT 기술분야다. PWA가 제공해 주는 다양한 기능들은 기업의 매출을 증가시키기 위한 마케팅 도구로도 많이 사용되고 있으며, 점차 자사의 웹사이트에 PWA를 채택하는 글로벌 기업들이 증가하고 있다. 이 책은 PWA에 대한 깊이 있는 지식과 기술을 제공하며, 이 책을 읽는 독자들은 그 지식을 이용해 SPA(Single Page Application)는 물론이고, 다른 어떤 Web Page라도 PWA로 만들 수 있게 된다. PWA와 관련된 대부분의 기술 영역에 대한 지식을 제공하면서 초급 개발자도 쉽게 이해할 수 있도록 PWA 관련 기초 지식 분야도 내용에 포함했으며, 중급 개발자도 자신의 기술 역량을 확장할 수 있도록 PWA의 고급 기술 영역까지 다루었다.Part 1(1~5장)에서는 Progressive Web App의 개요를 설명하고, 기초 및 실습 준비를 돕는다. Part2(6~16장)에서는 Progressive Web App 만들기 실습을 통해 따라 하기만 하면 PWA 기술이 적용된 웹사이트를 만들 수 있도록 안내해 주고 있다. 또한 각 실습 단계별 실행 화면을 보여줌으로써 학습자가 정확한 순서를 따라갈 수 있도록 하였다. Part 3(17~20장)은 부록으로, 실습과 관련된 각종 Tool의 설치 과정부터 사용 방법까지 친절하게 설명해 주고 있다. 이 책을 읽는 독자들은 Real Backend Server에서 구동되는 실습 프로젝트를 직접 만들면서 PWA의 모든 기술을 마스터할 수 있을 것이다.