차세대 웹 기술, 프로그레시브 웹 앱

프로그레시브 웹 앱(Progreesive Web App, PWA)은 네이티브 앱과 웹의 장점을 모두 지닌 새로운 종류의 웹 앱이다. 쉽게 말해 앱처럼 작동하는 웹이라고 볼 수 있다. 웹을 앱처럼 사용할 수 있기 때문에 사용자 입장에서는 굳이 앱을 설치하지 않아도 되며, 다양한 플랫폼에 간단히 이식이 가능하고, 오프라인에서도 사용할 수 있는 등 다양한 장점으로 차세대 웹 기술로도 손꼽힌다.
<만들면서 배우는 프로그레시브 웹 앱>에서는 프로그레시브 웹 앱 기술을 활용하여 가상으로 만든 ‘고담 임페리얼 호텔’의 웹사이트를 직접 개선해본다. 이 과정을 직접 따라하면서 프로그레시브 웹 앱의 구현 방법을 익힐 수 있다.
<만들면서 배우는 프로그레시브 웹 앱>은 다른 누구보다도 개발자를 위한 책이다. 독자에게 HTML과 자바스크립트 웹 개발에 대한 기본적인 이해가 있는 가정 하에 쓰여졌으며, 기존의 웹 개발 기술을 활용해 프로그레시브 웹 앱을 구현하고 싶은 독자에게 특히 유용한 지침서가 되어 줄 것이다.

chapter 1 프로그레시브 웹 앱 소개
__1.1 웹의 역습
__1.2 오늘날의 모바일 환경
__1.3 프로그레시브 웹 앱의 장점
__1.4 탭, 웹 그리고 서비스 워커

chapter 2 당신의 첫 번째 서비스 워커
__2.1 샘플 프로젝트 구성하기
__2.2 고담 임페리얼 호텔에 오신 것을 환영합니다
__2.3 코드 알아가기
__2.4 현재의 오프라인 사용자 경험
__2.5 첫 번째 서비스 워커 만들기
__2.6 점진적 향상이란?
__2.7 HTTPS와 서비스 워커
__2.8 웹에서 콘텐츠 가져오기
__2.9 오프라인 요청 감지하기
__2.10 HTML Response 생성하기
__2.11 서비스 워커의 범위(Scope) 이해하기
__2.12 정리

chapter 3 캐시 스토리지 API
__3.1 CacheStorage란 무엇인가
__3.2 언제 캐시할지 결정하기
__3.3 CacheStorage에 요청 저장하기
__3.4 CacheStorage로부터 요청 받아오기
__3.5 샘플 앱에서 캐싱하기
__3.6 각각의 요청에 올바른 응답 매칭하기
__3.7 HTTP 캐싱과 HTTP 헤더
__3.8 정리

chapter 4 서비스 워커 생명주기와 캐시 관리
__4.1 서비스 워커의 생명주기
__4.2 서비스 워커의 수명과 waitUntil의 중요성
__4.3 서비스 워커 업데이트하기
__4.4 캐시를 관리해야 하는 이유
__4.5 캐시 관리 및 이전 캐시 제거
__4.6 캐싱된 response를 다시 사용하기
__4.7 올바른 헤더 캐싱을 제공하기 위한 서버 설정
__4.8 개발자 도구
__4.9 정리

chapter 5 ‘오프라인 우선’을 받아들이기
__5.1 오프라인 우선이란 무엇입니까?
__5.2 일반적인 캐싱 패턴
__5.3 믹스 앤 매치, 새 패턴 생성하기
__5.4 캐싱 전략 세우기
__5.5 캐싱 전략 구현하기
__5.6 어플리케이션 쉘 아키텍처
__5.7 앱 셸 구현하기
__5.8 목표 달성
__5.9 정리

chapter 6 IndexedDB로 로컬에 데이터 저장하기
__6.1 IndexedDB란?
__6.2 IndexedDB 사용하기
__6.3 SQL Ninja를 위한 IndexedDB
__6.4 IndexedDB 실제로 적용하기
__6.5 프로미스를 활용한 데이터베이스
__6.6 IndexedDB 관리
__6.7 서비스 워커에서 IndexedDB 사용하기
__6.8 IndexedDB 에코시스템
__6.9 정리

chapter 7 백그라운드 동기화를 통한 오프라인 기능 보장
__7.1 백그라운드 동기화는 어떻게 작동하는가
__7.2 The SyncManager
__7.3 동기화 이벤트로 데이터 넘기기
__7.4 앱에 백그라운드 동기화 추가하기
__7.5 정리

chapter 8 메시지를 통한 서비스 워커와 페이지 간의 커뮤니케이션
__8.1 윈도우에서 서비스 워커로 메시지 보내기
__8.2 서비스 워커에서 열려있는 모든 윈도우로 메시지 보내기
__8.3 서비스 워커에서 특정 윈도우로 메시지 보내기
__8.4 MessageChannel로 커뮤니케이션 채널을 열어두기
__8.5 윈도우 간 통신하기
__8.6 동기화 이벤트에서 페이지로 메시지 보내기
__8.7 정리

chapter 9 인스톨 가능한 웹 앱으로 홈 화면 차지하기
__9.1 인스톨 가능한 웹 앱
__9.2 브라우저가 ‘앱 설치 배너’를 언제 표시할지 결정하는 방법
__9.3 웹 앱 매니페스트의 구조
__9.4 다양한 플랫폼 호환성 고려하기
__9.5 정리

chapter 10 사용자에게 푸시 알림 보내기
__10.1 푸시 알림의 생애
__10.2 알림 생성하기
__10.3 푸시 이벤트 구독하기
__10.4 서버에서 푸시 이벤트 전송하기
__10.5 푸시 이벤트 수신하고 알림 표시하기
__10.6 정리

chapter 11 프로그레시브 웹 앱 UX
__11.1 우아함과 신뢰
__11.2 서비스 워커에서 상태정보 알려주기
__11.3 프로그레시브 UI KITT로 커뮤니케이션하기
__11.4 프로그레시브 웹 앱의 일반적인 메시지
__11.5 올바른 단어 선택
__11.6 사용자에게 명확히 설명하기
__11.7 프로그레시브 웹 앱 디자인
__11.8 설치 프롬프트 책임지기
__11.9 RAIL로 성능 측정 및 성능 목표 설정하기
__11.10 정리

chapter 12 PWA의 미래
__12.1 Payment Request API로 결제 수락하기
__12.2 Credential Management API로 사용자 관리하기
__12.3 WebGL을 사용한 Real-Time Graphics
__12.4 음성 인식 지원을 위한 첨단 API
__12.5 WebVR을 통한 브라우저 내 가상 현실
__12.6 앱에서 앱으로 쉽게 공유하기
__12.7 매끄러운 미디어 재생 UI
__12.8 다가올 위대한 시대

부록A 서비스 워커 : ES2015 적용하기
부록B 전면 광고를 싫어하는 이유
부록C CORS vs NO-CORS