@ 설명된 URL
@ 정보
MIME : text/cache-manifest
해당 파일은 UTF-8로 인코딩 되야함.
<html manifest="game_othello.manifest">
@ 주의
파일 맨 마지막에
NETWORK:
*
http://*
https://*
를 추가해주자.
안그러면 외부 통신 할려는거 전부 안될것이다.
@ 예제 파일 (game_othello.manifest)
CACHE MANIFEST
# rv 20150408
CACHE:
game_othello.html
../../js/_M.all/_M.all.css
game_othello.css
../../js/_M.all/_M.all.js
game_othello.js
game_othello_ai.js
@ 적용후 로그 (웹브라우저의 콘솔 로그에 찍힘)
@@ 맨 처음 받아올때
Creating Application Cache with manifest http://www.mins01.com/web_work/fun/game_othello/game_othello.manifest
game_othello.html:1 Application Cache Checking event
game_othello.html:1 Application Cache Downloading event
game_othello.html:1 Application Cache Progress event (0 of 6) http://www.mins01.com/web_work/fun/game_othello/game_othello.css
game_othello.html:1 Application Cache Progress event (1 of 6) http://www.mins01.com/web_work/js/_M.all/_M.all.css
game_othello.html:1 Application Cache Progress event (2 of 6) http://www.mins01.com/web_work/fun/game_othello/game_othello.html
game_othello.html:1 Application Cache Progress event (3 of 6) http://www.mins01.com/web_work/js/_M.all/_M.all.js
game_othello.html:1 Application Cache Progress event (4 of 6) http://www.mins01.com/web_work/fun/game_othello/game_othello.js
game_othello.html:1 Application Cache Progress event (5 of 6) http://www.mins01.com/web_work/fun/game_othello/game_othello_ai.js
game_othello.html:1 Application Cache Progress event (6 of 6)
game_othello.html:1 Application Cache Cached event
@@ 캐시된 후 (브라우저는 캐시에서 해당 목록을 전부 가져온다. 디버깅툴의 네트워크 부분에서 확인)
Document was loaded from Application Cache with manifest http://www.mins01.com/web_work/fun/game_othello/game_othello.manifest
game_othello.html:1 Application Cache Checking event
game_othello.html:1 Application Cache NoUpdate event
@@ 파일이 하나 없을 경우 동작 : 이전 캐시가 있다면 그 캐시를 사용해서 동작한다.
Document was loaded from Application Cache with manifest http://www.mins01.com/web_work/fun/game_othello/game_othello.manifest
game_othello.html:1 Application Cache Checking event
game_othello.html:1 Application Cache Downloading event
game_othello.html:1 Application Cache Progress event (0 of 6) http://www.mins01.com/web_work/js/_M.all/_M.all.css
game_othello.html:1 Application Cache Progress event (1 of 6) http://www.mins01.com/web_work/js/_M.all/_M.all.js
game_othello.html:1 Application Cache Progress event (2 of 6) http://www.mins01.com/web_work/fun/game_othello/game_othello.css
game_othello.html:1 Application Cache Progress event (3 of 6) http://www.mins01.com/web_work/fun/game_othello/game_othello_ai.js
game_othello.html:1 Application Cache Progress event (4 of 6) http://www.mins01.com/web_work/fun/game_othello/game_othello.html
game_othello.html:1 Application Cache Progress event (5 of 6) http://www.mins01.com/web_work/fun/game_othello/game_othello.js
game_othello.html:1 Application Cache Error event: Resource fetch failed (404) http://www.mins01.com/web_work/fun/game_othello/game_othello.js
@ 크롬디버깅툴 -> Resources -> Application Cache 쪽을 확인하면 현재 캐싱 상태를 확인할 수 있다.
@ 상세 (밑의 #는 주석을 나태님
CACHE MANIFEST
# rv 1 20150408 (리비전 관리용. 이 부분을 수정하면 MANIFEST 파일이 새로운 파일이 되어 다시 캐싱을 시도한다.)
# CACHE MANIFEST 는 필수 표시 부분
# 오프라인 부분 표시. 이 밑으로는 캐시하는 파일을 나타냄.(없어도 되며, 캐싱 부분의 순서가 처음이 아닐 경우 사용)
CACHE:
./xxxx/yyyy.js
./xxxx/yyyy.css
# 온라인 파일 부분 (캐시를 안하며, 항상 새로 불림)
NETWORK:
./proc/proc.php
# 오프라인 부분 표시. 맨 위가 아니라 밑에 다시 표시할 수도 있다.
CACHE:
./xxxx/yyyy.js
./xxxx/yyyy.css
# 섹션 자원에 엑세스 할 수 없는 경우의 대체 페이지.
# "첫번째URI 두번째URI"로 구성. 첫번째URI는 해당 패턴 일체를 체크 (와일드 카드 사용가능), 두번째URI는 대체 URI
FALLBACK:
/ fallback.html
# 나머지 전체는 항상 온라인 파일
NETWORK:
*
