Workbox 란?
워크박스는 PWA의 캐싱 기능을 편하게 구현할 수 있도록 지원되는 표준 PWA 라이브러리입니다. 아래와 같은 기능을 제공합니다.
-
Precaching
웹 애플리케이션을 접속하기 전에 미리 캐싱해놓는 캐싱 방법을 말합니다. -
Runtime caching
웹 애플리케이션을 동작 시킬 때 발생하는 요청에 대해 서버 응답을 캐시 스토리지에 저장하는 캐싱 방법을 말합니다. 보통 이미지와 같은 리소스는 파일 용량이 커서 처음 페이지 접속할 떄 서비스 워커 설치 시간이 길어지므로 런타임 캐싱으로 하는게 좋습니다. -
Strategies
-
Request routing
-
Background sync
-
Helpful debugging
서비스워커란?
풍부한 오프라인 경험, 주기적 백그라운드 동기화, 푸시 알림이 웹에서 지원되고 있습니다. 서비스 워커는 이러한 모든 기능의 기술적 기반을 제공합니다.
우리가 기존에 사용하던 웹은 이렇습니다.
- 사용자가 웹 서버에 요청을 합니다.
- 응답이 와서 HTML,CSS,JavaScript를 받습니다.
- 응답받은 파일들을 통해 페이지를 렌더링 하게 됩니다.
- 그 다음, JavaScript를 통해서 사용자에 요청에 따라 API요청을 해서 필요한 데이터를 받아와서 사용자에게 보여준다.
허나 이는 사용자가 웹페이지를 나가거나 브라우저를 종료하게 되면 불가능하게 된다.
이러한 문제를 해결해 주는 것이 서비스 워커
서비스워커는 브라우저가 종료할 때에도 독자적인 형태로 작동한다.
서비스워커를 통해서 할 수 있는 대표적인 일에는 인터넷이 없는 상황에서 브라우저의 캐시를 통해서 데이터를 받아와서 보여준 것처럼 할 수 도 있고,
서비스 워커를 통해서 디자인의 변화나 다른 것들의 변화를 미리 가져와서 변경한 후, 사용자가 접속했을 때 빠른 로딩이 가능하게끔 할 수 있습니다.
브라우저가 닫힌다고 서비스 워커가 닫히는 것은 아니기 때문에, 푸시 알림을 보낼 수가 있게 됩니다.
서비스워커 특징
- 돔에 접근이 불가하다. 컨텍스트에 동작하기 때문이다.(이것이 우리 프로젝트에서 문제가 된다.)
- 보안이 취약하기 때문에 https에서만 동작한다.
- 탐색과 리소스를 가로채서 수정하고 캐싱할 수 있음
- 이벤트 기반 워커
