HTML5 offline, application cache , manifest
@ 설명된 URL http://html5.clearboth.org/offline.htmlhttps://developer.mozilla.org/ko/docs/Web/HTML/Using_the_application_cache
@ 정보 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: *