HTML5 offline, application cache , manifest

1
@ 설명된 URL
http://html5.clearboth.org/offline.html
https://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:
*
댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
제목 작성자 날짜
공대여자
공대여자
mins01
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자
공대여자