이 책은 흥미로운 만큼 부담스러울 수 있는 개념들을 알기 쉽게 설명하고 따라 하기 쉬운 예제 코드로 정리해놓았다. 또 서비스 워커의 함정을 보여주고 이를 매끄럽게 해결하는 방법도 알려준다.
갑작스럽게 네트워크와 단절되는 상황에 처하더라도 살아남는 웹사이트를 만들고 싶다면 이 책을 통해 서비스 워커를 실무에 적용하는 비법을 터득하길 바란다.
--- 「추천의 글」 중에서

세상에는 웹을 기반으로 하는 다양한 사업들이 있다. 현재 우리의 웹 의존도는 상상을 초월한다. 웹은 인터넷을 이용해 만들어진 서비스 중 하나다. 인터넷에서는 수많은 네트워크가 동일한 프로토콜에 따라 데이터를 주고받는다. 하지만 네트워크가 안 되면 웹도 불가능하다. 과거에는 그랬다. 네트워크가 작동하지 않는 상황에서도 웹사이트를 계속 실행할 수 있는 기술이 도입됐다. 바로 ‘서비스 워커’다.
--- 「Chapter 1 서비스 워커 소개」 중에서

서비스 워커의 현재 지원 상황을 확인하고 도입 여부를 망설일 수도 있다. 하지만 지금 당장 서비스 워커를 배포해도 상관없다. 서비스 워커는 이미 작동하는 웹사이트 위에 부가적으로 적용하는 것이기 때문에 브라우저 지원 상태가 완벽하지 않아도 상관없다. 지원되는 브라우저에서는 서비스 워커가 작동하고, 미지원 브라우저에서는 웹사이트가 기존과 똑같이 보일 것이다. 현재 크롬 지원율이 가장 높다. 그럼 이제 서비스 워커를 등록해보자.
--- 「Chapter 2 오프라인 준비하기」 중에서

출발점은 서비스 워커 등록이다. HTML문서의 sCtipt 요소에 작성해둔 코드에 의해 서비스 워커가 등록, ‘다운로드’된다. 다운로드된 서비스 워커 파일은 브라우저에 ‘설치’된다. 서비스 워커를 설치해 ‘활성화’하면 브라우저 제어권을 갖는다. 활성화한 서비스 워커는 사이트에 대한 모든 요청을 중계한다. 이것이 서비스 워커의 생명주기(life CyCle)이다. 하지만 서비스 워커를 업데이트한다면 이 생명주기에 ‘대기’라는 한 단계가 추가된다. 새 버전이 백그라운드에 다운로드되었다가 브라우저를 재시작할 때까지 대기하면서 활성화를 기다리는 것이다.
--- 「Chapter 3 자원 가져오기」 중에서

웹 브라우저는 웹 서버에 페이지를 요청하고 웹 서버는 거기에 응답한다. 웹 브라우저와 웹 서버가 서로를 기억하지 못한다면 그들은 관계를 유지할 수 없을 것이다. 그 기억을 돕는 것이 쿠키다. 웹 서버는 쿠키를 이용해 사용자를 식별하고 기억할 수 있다. 그럼 웹 브라우저가 웹 서버에 특정 항목을 요청했다는 것은 어떻게 기억될까? 그것은 캐시가 있어 가능하다. 캐시는 소중한 것을 쌓아두는 곳이다. 서비스 워커에는 HTTP 캐시와 캐시 API의 기능이 필수적이다.
--- 「Chapter 4 캐시 미 이프 유 캔」 중에서

정적 캐시에 저장해둔 자원들을 모두 활용해서 오프라인 대응 페이지를 만들 차례다. 오프라인 대응 페이지를 생성한 뒤에는 URL을 정적 캐시 대상 목록에 추가해야 한다. 그리고 오프라인 상태에서 잘 작동하는지 확인해봐야 한다.
--- 「Chapter 5 서비스 워커 전략」 중에서

서비스 워커에는 아직 개선할 점이 있다. 그렇다고 낙담할 일은 아니다. 글자 하나가 잘못돼 그런 경우가 많다. 브라우저 개발자 도구에서 자바스크립트 콘솔 창을 열어보면 어느 코드가 잘못됐는지 찾는 데 도움이 될 것이다. 서비스 워커는 코드 양이 너무 많지만 여기에는 일정한 패턴이 반복된다. 패턴은 레고 블록과 같다. 이 블록을 잘 이해하고 조합하면 다양한 환경을 위한 수많은 설정을 구성할 수 있다.
--- 「Chapter 6 서비스 워커 다듬기」 중에서

서비스 워커는 페이지와 이미지를 몇 장까지 캐시할 수 있을까? 캐시에 할당된 공간은 일정하지 않다. 특정 캐시 항목을 일정 수 이하로 줄이는 코드를 작성해보자. 여러 번 사용하게 될 코드는 재사용하기 편하도록 함수로 정의해두면 좋다.
--- 「Chapter 7 정리정돈」 중에서

웹사이트에서는 사용자가 둘러본 페이지들이 캐시에 저장된다. 그러다가 사용자의 인터넷 연결이 끊기면 오프라인 대응 페이지가 출력된다. 사용자에게 인터넷 연결 없이도 볼 수 있는 페이지들을 목록으로 안내해주는 것은 어떨까? 오프라인에서 읽을 페이지를 저장하는 사용자 인터페이스가 필요하다. CSS를 이용해 버튼을 꾸미고, 로컬스토리지 같은 API로 캐싱하는 페이지의 메타데이터를 저장하는 법을 알아보자. 또 사용자가 이용하는 페이지의 이미지들(비디오·오디오 파일까지)을 저장할 별도의 캐시를 만드는 방법도 소개한다.
--- 「Chapter 8 오프라인 사용자 경험」 중에서

웹은 네이티브가 아니다. 과거에는 오프라인에서 작동하는 것을 만들려면 네이티브 앱이 유일한 대안이었다. 그러나 서비스 워커를 이용하면 오프라인 기능을 가진 사이트를 웹으로 즉시 배포할 수 있다. 네이티브 앱과 웹의 장점만을 결합한 프로그레시브 웹 앱(PWA)이 바로 그것이다. PWA는 기기나 브라우저 종류에 관계 없이 누구나 사용할 수 있어야 한다. 즉 반응형 디자인과 맥을 같이한다. PWA의 핵심 기술은 HTTPS, 서비스 워커, 웹 앱 매니페스트다.
--- 「Chapter 9 프로그레시브 웹 앱」 중에서

웹 기술의 놀라운 진보에도 불구하고 아직도 많은 사람이 웹에서 불쾌한 경험을 하고 있다. 예측할 수 없는 네트워크 환경으로 인해 웹이 제대로 작동하지 않는 상황이 반복되면 사람들은 점차 웹을 외면하게 될 것이다. 이런 현실을 바꾸는 것은 쉽지 않은 도전이다. 하지만 해낼 수 있다. 프로그레시브 웹 앱이 앞길을 비춰줄 것이다.