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

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

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의 모든 기술을 마스터할 수 있을 것이다.

- 연세대학교 공과대학 학사, 석사
- A사 연구소 수석연구원
- IT 분야 프리랜서, 관련 서적 집필 중

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