HTML5 offline, application cache , manifest

1 minute read

@ 설명된 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: *


🔗original-link

Updated: