read : HTML5 offline, application cache , manifest : 기술 #html::공대여자홈

HTML5 offline, application cache , manifest

작성자 공대여자

작성 : 2015-04-08 09:52 조회 : 153
지남 1일간

2015-04-08 - 2015-04-08

좌표
첨부된 파일이 없습니다.

#html

@ 설명된 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로 인코딩 되야함.

@ 주의

파일 맨 마지막에

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	제목	작성자	등록	조회
공지	[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)	공대여자	02/06 13:44	1661
공지	유용한 리눅스(LINUX) 명령어	공대여자	03/03 14:47	11347
공지	[공지] 기술 게시판	mins01	06/24 15:10	11559

일	월	화	수	목	금	토
3.31	4.1	4.2	4.3	4.4	4.5	4.6
4.7	4.8	4.9 game_tictactoe 2	4.10	4.11	4.12	4.13
4.14	4.15	4.16	4.17 :scope selector , querySelector 에서 this, self node 지정 1	4.18	4.19	4.20
4.21	4.22	4.23 ui_treemap new 2	4.24	4.25	4.26	4.27
4.28	4.29	4.30	5.1	5.2	5.3	5.4