cache.manifest가 첫 로딩 후 실패하는 원인과 해결책
HTML5 애플리케이션 캐시(AppCache)를 사용하다 보면 cache.manifest 파일이 최초 로딩 시에는 정상적으로 작동하지만, 그 이후 페이지를 다시 불러올 때 캐싱이 실패하는 경우가 발생합니다. 이는 주로 오프라인 리소스 처리와 캐시 갱신 설정이 올바르지 않기 때문입니다.
1. NETWORK 섹션 추가하기
매니페스트 파일의 맨 아래에 다음과 같이 NETWORK 섹션을 추가하세요. 와일드카드(*)를 지정하면 나열되지 않은 모든 리소스가 네트워크를 통해 정상적으로 요청됩니다.
NETWORK: *
이 설정이 없으면 매니페스트에 명시되지 않은 리소스는 캐시되지 않은 상태로 차단되어, 두 번째 로딩부터 페이지가 비정상적으로 동작할 수 있습니다.
2. URL에 버전 번호를 포함하기
캐시된 매니페스트가 갱신되지 않아 발생하는 문제를 방지하려면, html 태그의 manifest 속성 경로에 버전 번호(쿼리 스트링)를 붙여주세요.
<html manifest = "path/to/cache.manifest?v=20">
파일 내용을 변경할 때마다 이 버전 번호를 올리면 브라우저가 새로운 매니페스트로 인식하고 캐시를 다시 다운로드합니다.
3. 매니페스트 파일 자체도 버전 관리하기
또한 매니페스트 파일 내부에도 주석 형태의 개정(revision) 정보를 남겨두고, 참조하는 리소스들에도 버전 파라미터를 함께 지정하는 것이 좋습니다.
CACHE MANIFEST # rev ?v=42 /css/style.css?v=20 /js/myscript.js?v=20
정리
위 세 가지 설정을 적용하면 cache.manifest가 첫 로딩 이후 실패하는 문제를 효과적으로 해결할 수 있습니다.
- NETWORK: * — 매니페스트에 없는 리소스의 네트워크 접근 허용
- manifest 속성의 버전 쿼리 스트링 — 매니페스트 변경 사항을 브라우저가 감지하도록 유도
- CACHE MANIFEST 내부 개정 주석 및 리소스 버전 관리 — 캐시 무효화 명확화