PWA의 시대

개발자들은 pwa의 시대가 시작되면서 캐시를 직접 관리할 수 있다는 막강한 권한을 가지게 되었다.

그렇다면 우리가 모든 것을 일일히 컨트롤하면 좋을까?

보통의 상황에서 그것은 좋지않다고 우리의 선배들은 말한다. 그렇다면 어떻게 해야할까?

기본 규칙을 세워라
그 기본 규칙이란 반드시 필요한 것만 요청해야 하며 각 요청의 크기를 최대한 작게 해야 한다는 것이다.

The Best Request Is No Request, Revisited

반드시 필요한 것만 요청하라
가능한 한 작은 파일을 요청하라
여러 가지 파일 형식을 제공하라
여러 가지 크기의 이미지를 제공하라
가능한 한 요청을 미뤄라

서비스 워커로 요청을 제어하라
서비스 워커는 웹 워커(웹 워커는 브라우저에서 자바스크립트 코드를 백그라운드 스레드에서 실행할 수 있게 해주는 도구다-옮긴이)의 하나로, 서비스 워커에서는 페치 APIFetch API를 활용해 모든 네트워크 요청을 가로채고, 수정하고, 응답할 수 있다. 서비스 워커는 캐시 APICache API와 인덱스드DBIndexedDB로 대표되는 클라이언트 측 비동기 데이터 저장소에도 접근해 자원을 저장하고 불러올 수 있다.

서비스 워커가 설치되면 자원 요청 이벤트에 간섭해 나중에 사용할 자원을 캐시에 저장해둘 수 있다. 많은 개발자가 이를 활용해 전역 스타일, 스크립트, 로그 등의 전역 자원을 캐시에 채워놓고 있다. 이미지를 캐시해뒀다가 네트워크 요청이 실패한 경우에 사용하도록 하는 활용법도 가능하다.