워크박스의 런타임 캐시 관리

date

May 10, 2023

thumbnail

gsc

Done

public

slug

runtime-cache-management

author

Introdution

ServiceWorker의 런타임 캐시를 설정하는 방법을 간략하게 정리해보고자 한다.

런타임캐시 (Runtime Cache) 프리캐시(pre-cache)는 ServiceWorker가 등록될 때 미리 원하는 파일을 캐시하는것이라면, 런타임 캐시는 HTTPS 요청처럼 프로그램 로직에 따라 실행 중에 캐싱하는 방법을 말한다.

워크박스의 5가지 캐시 전략

Network-First (Network Falling Back to Cache)

Network-First 방법은 먼저 네트워크에서 리소스를 가져오려고 시도하고, 만약 네트워크에서 가져오기에 실패한다면 캐시에서 리소스를 가져온다. 즉, 인터넷 접속에 문제가 발생하면 2단계로 넘어가 캐시에서 정보를 읽고 화면에 표시한다. 이 방법은 자주 업데이트 되는 요청에 대해 가장 적합한 방법이다.

예) 뉴스, 날씨와 같은 실시간 정보를 제공하는 서비스에 사용할 수 있다.

Cache-First (Cache Falling Back to Network)

Cache-First는 항상 캐시에 먼저 요청을한다. 만약 정보가 존재한다면 캐시 정보를 출력하고, 캐시에 내용이 없으면 인터넷에 접속하여 결과를 화면에 보여준다. 그리고 해당 정보를 캐시에 저장한다. 이 방법은 정보가 변경되는 경우가 거의 없는 파일에 적합하다.

예) 정적인 이미지나 스타일시트, 폰트와 같은 자원에 적용할 수 있다.

Stale-while-revalidate

stale-while-revalidate는 캐시에 먼저 요청하고 내용이 존재하는 경우 캐시의 내용을 출력한다. 그리고 serviceWorker는 네트워크에 접속하여 현재 캐시의 내용과 네트워크 정보가 동일한지 비교를 하고, 다른 경우 캐시의 정보를 업데이트한다. 즉, 캐시의 정보를 가져오는것과 동시에, 유효성을 검증하여 최신 내용으로 유지하는 방법이다.

예) 블로그, 위키와 같은 컨텐츠가 자주 변경되지 않는 서비스에 사용할 수 있다.

수명 관리

stale-while-revalidate를 수명을 관리하는 프로세스를 적용할 수 있다. (최신 데이터의 중요성이 상대적으로 높은 경우에 관리할 수 있겠다.)

웹 서버는 HTTP 응답에서 이 Cache-Control 헤더를 사용한다.


Cache-Control: max-age=1, stale-while-revalidate=59

이 설정은 1초이내 같은 요청이 다시 발생하는 경우 캐시된 값을 그대로 사용한다. 1초에서 60초 사이에 다시 발생하는 요청은 캐싱된 응답을 사용하지만, 백그라운드에서 서버로 요청하여 최신 내용으로 갱신한다. 60초가 지난 이후에는 캐싱된 정보를 사용하지 않고, 네트워크 요청을 한다.

stale-while-revalidate로 최신 상태 유지 (web.dev)

정리하면,

0-1초: 캐싱된 응답을 사용

1-60초: 캐싱된 정보를 사용하고, 백그라운드에서 네트워크 요청하여 최신 정보로 갱신

60초 초과: 네트워크 요청하여 새로운 응답을 캐싱하고, 출력

Network-Only

Network-Only는 네트워크 요청을 발생시켜 데이터를 가져오는 방법이다.

예) POST 요청이나 검색 결과와 같은 동적인 데이터를 제공하는 웹사이트에서 사용할 수 있다.

Cache-Only

캐시 전용 방법은 항상 캐시의 내용을 가져오는 방법이다. 일반적이지 않지만 자체 사전 캐싱 단계가 있는 경우 유용하게 사용할 수 있다. 자세한 내용은 cache-only (web.dev)의 링크에서 확인해보자.

예) 게임이나 앱과 같은 인터랙티브한 컨텐츠를 제공하는 웹사이트에서 사용할 수 있다.

전략 요약

전략	설명	예시
Network-First	먼저 네트워크에서 리소스를 가져오려고 시도하고, 실패하면 캐시에서 가져옴	뉴스, 날씨와 같은 실시간 정보
Cache-First	항상 캐시에 먼저 요청하여 존재한다면 캐시 정보를 출력하고, 없으면 인터넷에 접속하여 결과를 보여줌	정적인 이미지, 스타일시트, 폰트
Stale-while-revalidate	캐시 정보를 가져오는 것과 동시에, 유효성을 검증하여 최신 내용으로 유지	블로그, 위키와 같은 자주 변경되지 않는 정보
Network-Only	반드시 네트워크 요청이 이루어져야 하는 경우 사용	검색 결과와 같은 동적인 정보
Cache-Only	항상 캐시의 내용을 가져오는 방법	게임,앱과 같이 오프라인에 사용 가능한 정보

마무리

PWA를 만들어보면서 ServiceWorker를 구성해보았지만, 설계하는 단계에서 궁금한 내용들이 생겨 한번 살펴보았다. 상황에 따라 적절한 방법을 적용하면 완성도 높은 웹 서비스를 제공할 수 있다. 이 내용을 기억하고 오프라인 환경에서도 필요한 동작을 하는 서비스를 만들어보자.