Latest web development tutorials

HTML5 응용 프로그램 캐시

HTML5는 캐시 매니페스트 파일을 생성하여, 당신은 쉽게 웹 응용 프로그램의 오프라인 버전을 만들 수 있습니다 사용합니다.

응용 프로그램 캐시 (응용 프로그램 캐시) 란 무엇입니까?

HTML5는 웹 응용 프로그램 캐시 할 수 있고, 인터넷 연결없이 액세스 할 수 있다는 것을 의미 응용 프로그램 캐시를 소개합니다.

애플리케이션 캐시 애플리케이션은 세 가지 장점을 가져온다 :

  1. 오프라인 브라우징 - 사용자가 응용 프로그램을 오프라인에서 사용할 수
  2. 속도 - 캐시 된 리소스를 빠르게로드
  3. 서버 부하 감소 - 브라우저는 서버에서 업데이트하거나 변경할 자원을 다운로드합니다.

브라우저 지원

Internet ExplorerFirefoxOperaGoogle ChromeSafari

인터넷 익스플로러 10, 파이어 폭스, 크롬, 사파리와 오페라는 응용 프로그램 캐시를 지원합니다.

HTML5 캐시 매니페스트 예

다음의 예는 (오프라인으로 볼) 캐시 매니페스트와 HTML 문서를 보여줍니다

예

<!DOCTYPE HTML>
<html manifest="demo .appcache ">

<body>
文档内容......
</body>

</html>

»시도

캐시 매니페스트 기준

응용 프로그램 캐시를 사용하려면, 라벨 문서 <HTML>에서 매니페스트 속성을 포함 :

<!DOCTYPE HTML>
<html manifest="demo .appcache ">
...
</html>

사용자가 캐시됩니다 액세스 할 때 각각의 지정된 페이지를 명시. 매니페스트 속성이 지정되지 않은 경우 (직접 매니페스트 파일에서 페이지를 지정하지 않는 한), 페이지가 캐시되지 않습니다.

추천 매니페스트 파일 확장자 : ".있는 AppCache".

말 유의하시기 바랍니다 매니페스트 파일은 올바른 MIME 타입, 즉 "텍스트 / 캐시 매니페스트"를 구성해야합니다. 당신은 웹 서버를 구성해야합니다.

매니페스트 파일

매니페스트 파일은 브라우저 캐시의 내용을 지시 (및 콘텐츠를 캐시하지 않음) 간단한 텍스트 파일이다.

매니페스트 파일은 세 부분으로 나눌 수있다 :

  • CACHE MANIFEST -이 문서의 제목의 첫 번째 다운로드 후 캐시됩니다
  • NETWORK -이 제목에서 다음 문서는 서버에 연결해야하고, 캐시되지 않습니다
  • 폴백 -이 제목의 문서 롤백 페이지에서 (예 : 페이지 404) 목록에서 페이지에 액세스 할 수없는 경우

CACHE MANIFEST

첫 번째 줄, CACHE MANIFEST가 필요합니다 :

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

CSS 파일, GIF 이미지, 그리고 자바 스크립트 파일 : 위의 매니페스트 파일은 세 가지 자원을 나열합니다. 매니페스트 파일을로드하면 브라우저는 사이트의 루트 디렉토리에서 세 개의 파일을 다운로드합니다. 사용자가 인터넷에서 연결이 끊어 때마다 그런 다음, 이러한 자원은 계속 사용할 수 있습니다.

NETWORK

하위 섹션의 네트워크 파일의 다음 규정은 "login.php"캐시되지 않습니다 및 오프라인에서 사용할 사용할 수 없습니다 :

NETWORK:
login.php

당신은 / 파일이 인터넷 연결을 필요로하는 모든 기타 다른 자원을 표시하기 위해 별표 (*)를 사용할 수 있습니다 :

NETWORK:
*

FALLBACK

모든 파일의 대안 / HTML5 / 디렉토리 "offline.html"로, 인터넷에 연결을 설정할 수없는 경우 아래에 정의 된 대체 섹션 :

FALLBACK:
/html/ /offline.html

주 : 첫번째 URI는 제가 대신 할 자원이다.

업데이트 캐시

애플리케이션이 캐시되면 다음이 발생할 때, 그것은 캐시 중에서 :

  • 사용자는 브라우저 캐시를 지 웁니다
  • 매니페스트 파일이 수정된다 (아래 팁 참조)
  • 응용 프로그램 캐시를 업데이트 할 수있는 프로그램으로

예 - 매니페스트 파일을 작성

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

말팁 : 주석 행의 시작 부분에서"#"뿐만 아니라 다른 목적을 충족합니다. 캐싱 애플리케이션은 때 매니페스트 파일 변경 사항을 업데이트됩니다. 당신이 사진을 편집하거나, 자바 스크립트 함수를 수정하는 경우, 변경 사항은 다시 캐시되지 않습니다. 업데이트 주석 행은 파일 접근 캐시 다시 브라우저의 날짜와 버전 번호입니다.

응용 프로그램 캐시 지침에 대한

캐시의 내용에주의하십시오.

파일이 캐시되면, 브라우저는 서버에서 파일을 편집 할 경우에도 캐시 된 버전을 계속 표시됩니다. 캐시를 업데이트해야 브라우저를 만들려면, 당신은 매니페스트 파일을 업데이트해야합니다.

주 : 데이터 캐시 브라우저 용량 한계가 동일하지 않을 수있다 (일부 제한 브라우저 설정은 각 사이트 5메가바이트).