서비스 워커는 PWA의 핵심 기술이며, 오프라인에서 앱을 사용할 수 있게 만들어주는 주체다.
어떻게 PWA가 오프라인에서 동작할 수 있는지에 대해 이해해보자.
캐시 스토리지
오프라인 동작에 대해 이해하기 위해서는 우선 캐시 스토리지에 대해 알고 가야한다.
캐시 스토리지는 캐시들을 저장하는 테이블인데, 캐시는 Request-Response pair를 저장하는 테이블이다.
결론적으로 캐시 스토리지 API를 이용하면 Request-Response를 저장할 수 있으며, 다른 말로 파일을 저장할 수 있다.
따라서 캐시 스토리지에 파일을 저장해두고 불러올 수 있으므로, 네트워크 요청을 하지 않아도 파일에 접근할 수 있는거다.
오프라인 동작
그런데 생각해보면, 캐시 스토리지 API를 통해 저장해둔 파일들을 불러오는 그 스크립트를 오프라인에서 어떻게 실행하는가?
그 스크립트 파일도 결국 네트워크를 통해 가져와야만 실행이 가능하다.
여기서 서비스 워커의 역할이 나오는데, 서비스 워커는 메인 쓰레드와 다른 자신의 쓰레드를 가지며 오프라인에서도 동작한다.
서비스 워커의 fetch 이벤트는 스코프(서비스 워커 파일이 속한 폴더와 하위폴더) 안에서 이루어진 모든 네트워크 요청을 인터셉트 해서 Response를 직접 넘겨줄 수 있게 해준다.
여기에서 네트워크 요청에는 파일 접근도 포함된다.
그래서 캐시 스토리지에서 Request나 URL로 검색해서 값인 Response를 찾아서 넘겨주면 오프라인에서도 그 파일을 사용할 수 있는거다.
// 서비스 워커 파일에서
self.addEventListener("fetch", (e) => {
e.respondWith(
caches.match(e.request).then(response => {
return response || fetch(e.request)
})
)
})예를 들면 이 코드는 캐시에서 찾아서 돌려주고, 없으면 fetch() 요청을 해서 받은 Response를 준다.
결론적으로
- 서비스 워커가 오프라인에서 동작하고,
fetch이벤트가 네트워크 요청을 인터셉트해주기 때문에,
캐시스토리지에 저장해놓은 파일들을 오프라인에서도 사용할 수 있게 된다.
그러면 이제 자바스크립트 파일도 다 사용할 수 있으므로 IndexedDB도 사용할 수 있고, 따라서 파일, 자바스크립트 값들 모두를 저장하고 사용할 수 있다.
