HTML 애플리케이션 캐시에서 단일 URL에 대한 여러 고유 캐시 만들기
HTML5 애플리케이션 캐시(Manifest)를 사용할 때, 동일한 URL이라도 파일이 변경될 때마다 새로운 캐시 버전을 생성하고 싶은 경우가 있습니다. 이 문제를 해결하려면 아래의 방법들을 함께 적용해야 합니다.
1. 모든 리소스에 far-future 만료 날짜 설정
매니페스트의 CACHE 섹션에 포함된 모든 리소스에는 먼 미래의 만료 날짜(far-future expiration date)를 설정해야 합니다. 이렇게 하면 브라우저가 해당 파일들을 오랫동안 캐시에 유지하게 되어 불필요한 네트워크 요청을 줄일 수 있습니다.
2. 각 파일에 타임스탬프 접미사 추가
CACHE 섹션의 각 파일 이름 뒤에 타임스탬프를 붙여 고유한 URL을 만듭니다. 예시는 다음과 같습니다.
CACHE:
menu_1355817388000.js
toolbar_1355817389100.js
파일 이름에 포함된 숫자(타임스탬프)가 달라지면 브라우저는 이를 완전히 다른 리소스로 인식하므로, 하나의 논리적 파일에 대해 여러 고유 캐시 항목을 유지할 수 있습니다.
3. 파일 변경 시 매니페스트도 함께 업데이트
서버에서 파일 내용이 변경되면 해당 파일의 타임스탬프를 변경하는 것에 더해, 반드시 매니페스트 파일 자체도 수정해야 합니다. 브라우저는 매니페스트가 변경되었는지 확인한 후에야 캐시를 갱신하기 때문입니다.
매니페스트가 업데이트되면, 타임스탬프가 변경된 파일은 사용자가 다음에 사이트를 방문할 때 새로 다운로드됩니다. 반대로 개별 파일만 교체하고 매니페스트를 그대로 두면, 브라우저는 변경을 감지하지 못해 계속 이전 캐시를 사용하게 되므로 주의해야 합니다.
정리
핵심 전략은 세 가지입니다. 첫째, CACHE 섹션의 모든 리소스에 긴 만료 기간을 부여하고, 둘째, 파일별로 타임스탬프 접미사를 붙여 고유성을 확보하며, 셋째, 파일이 변경될 때마다 타임스탬프와 매니페스트를 함께 갱신하는 것입니다. 이 조합을 통해 단일 URL 기반의 캐시 무효화 문제를 효과적으로 해결할 수 있습니다.