SNS 앱 예제로 배우는 프로그레시브 웹 앱

SNS 앱 예제로 배우는 프로그레시브 웹 앱 

부제 네이티브 앱처럼 동작하는 웹 프로젝트 완성 

저자 이근혁 

 

출간/배본가능일 2020년 7월 31일 

정가 26,000원 

페이지 384 

판형 크라운판 (173 * 230) 

 

ISBN 979-11-6592-008-1 (93000) 

 

책 소개 

새로운 웹 기술을 활용하는 프로그레시브 웹 앱
이 책 한 권으로 확실하게 정리한다! 

 

프로그레시브 웹 앱은 지금까지 경험하지 못했던 새로운 모습의 차세대 웹 앱입니다. 오프라인 환경에서도 동작하고, 백그라운드 동기화를 통해 필요한 데이터를 갱신하거나 사용자에게 푸시 알림을 제공하는 등 다양한 기능을 웹 환경에서 제공할 수 있습니다.

이처럼 웹의 장점과 네이티브 앱의 장점을 결합한 형태인 프로그레시브 웹 앱은 웹 기술만으로 구현할 수 있으며, 지금도 계속 발전하면서 새로운 기술이 개발되고 있기 때문에 가까운 미래에는 웹 분야의 중요한 패러다임으로 자리잡을 것입니다. 이 책으로 여러분도 미래의 웹 기술을 미리 체험해보시기 바랍니다.

 

 

이 책의 특징 

‣ 기본적인 프로그레시브 웹 앱의 개념부터 구성까지 알아볼 수 있다. 
‣ 핵심적인 오프라인 캐싱, 백그라운드 동기화, 푸시 기능에 대해 쉽게 익힐 수 있다. 
‣ 실제 구현 시 고려해야 할 내용을 함께 살펴보며 개선 및 활용 방법에 대해 알아본다. 

 

 

이 책이 필요한 독자 

‣ 웹 기술로 네이티브 앱과 유사한 앱을 만들어보고 싶은 분 
‣ 더 나은 웹 환경을 추구하는 분 
‣ 웹 기술에 관심이 많은 분 

 

 

독자대상 

초중급 

 

 

소스코드 다운로드 

https://github.com/bjpublic/snsapp 

 

 

저자 소개 

이근혁 

고등학교 시절부터 지금까지 웹 개발자로 일하고 있다. 우연히 접한 웹 개발을 시작으로 흥미를 얻어 현재까지 웹 분야에 대한 다양한 기술을 배우고 활용하고자 노력하고 있으며, 지금보다 더 나은 웹을 추구하는 개발자 중 한 명이다.
다른 사람들과 지식을 공유하는 것을 좋아하여 개인 블로그(https://geundung.dev)와 깃허브(https://github.com/leegeunhyeok)에 다양한 내용을 종종 올리고 있다. 

 

 

목차

Chapter 01 시작하기

1.1 자바스크립트와 웹 기술의 발전

1.2 프로그레시브 웹 앱(PWA)이란?

1.3 네이티브 앱 vs 웹 앱 vs 하이브리드 앱 vs 프로그레시브 웹 앱

 

Chapter 02 실습을 위한 개발 환경 준비하기

2.1 Node.js 설치하기

2.2 Visual Studio Code 설치하기

2.3 실습 소스코드 준비하기

 

Chapter 03 프로그레시브 웹 앱이 되기 위한 준비

3.1 Paper 파악하기

3.2 Paper에 PWA 불어넣기

 

Chapter 04 PWA의 핵심, 서비스 워커

4.1 서비스 워커란?

4.2 서비스 워커 등록하기

4.3 서비스 워커의 기능 이벤트

4.4 서비스 워커에서 브라우저 요청 가로채기

4.5 서비스 워커의 생명주기

4.6 서비스 워커의 상태

 

Chapter 05 오프라인을 위한 캐시 스토리지

5.1 캐시 스토리지란?

5.2 웹 페이지 리소스 캐싱하기

5.3 캐시에서 응답하기

5.4 캐시 관리하기

5.5 다양한 캐싱 전략

5.6 오프라인 상태 알리기

 

Chapter 06 IndexedDB 사용하기

6.1 IndexedDB란?

6.2 데이터베이스 생성하기

6.3 객체 저장소 (ObjectStore)

6.4 트랜잭션 (Transaction)

6.5 Paper에 적용하기

 

Chapter 07 웹 앱 매니페스트 (Web App Manifest)

7.1 웹 앱 매니페스트란?

7.2 웹 앱 매니페스트 살펴보기

7.3 홈 화면에 Paper 설치하기

 

Chapter 08 Sync, 백그라운드 동기화

8.1 백그라운드 동기화 살펴보기

8.2 동기화 작업을 위한 저장소 만들기

8.3 백그라운드 동기화 기능 구현하기

8.4 백그라운드 동기화 개선하기

 

Chapter 09 서비스 워커와 클라이언트 간 메시지 주고받기

9.1 Paper의 문제 파악하기

9.2 서비스 워커에서 웹 페이지로 메시지 보내기

9.3 웹 페이지에서 서비스 워커로 메시지 보내기

9.4 메시지 채널을 통해 메시지 주고받기

 

Chapter 10 Push, 사용자에게 알림 보내기

10.1 푸시란?

10.2 웹 푸시 살펴보기

10.3 알림 API (Notification API)

10.4 푸시 알림 준비하기

10.5 푸시 알림 보내기

10.6 마무리하며

 

Chapter 11 부록

11.1 ES6 자바스크립트 맛보기

11.2 라이트하우스 (Lighthouse)

11.3 워크박스 (Workbox)

 

 

출판사 리뷰

네이티브 앱의 사용성과 웹의 접근성이 적절히 조합된 프로그레시브 웹 앱(PWA)은 지금까지 사용해왔던 웹과는 다른 새로운 경험을 제공합니다. 네트워크가 없는 오프라인 상태에서 웹 서비스를 사용하고, 백그라운드에서 데이터를 동기화하거나 푸시 메시지를 제공하는 등 기존의 웹에서 할 수 없었던 일들을 웹 기술만을 사용하여 구현할 수 있습니다.

이 책에서는 프로그레시브 웹 앱의 기본적인 개념과 서비스 워커, 웹 앱 매니페스트 등의 주요 구성 요소뿐만 아니라 오프라인 캐싱, 백그라운드 동기화, 푸시 알림과 같은 대표적인 기능에 대한 개념을 학습하고, 밑바닥부터 직접 구현해보며 일반적인 웹 앱을 프로그레시브 웹 앱으로 발전시켜 나가는 방향을 실습해볼 수 있습니다.