최신 웹 개발 튜토리얼

HTML5 응용 프로그램 캐시


응용 프로그램 캐시는 캐시 매니페스트 파일을 생성하여, 웹 애플리케이션의 오프라인 버전을 쉽게 만들 수 있습니다.


응용 프로그램 캐시는 무엇입니까?

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

응용 프로그램 캐시는 응용 프로그램에게 세 가지 이점을 제공합니다 :

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

배경

웹 애플리케이션은 네트워크에서 다운로드 할 필요가 웹 페이지로 구성되어 있습니다. 이 일이 들어 네트워크 연결이 있어야합니다. 그러나, 사용자는 그들의 통제 할 수없는 상황에 네트워크에 연결할 수 많은 경우가있다. HTML5 심지어 캐시 매니페스트를 사용하여 네트워크에 연결하지 않고 웹 응용 프로그램에 액세스 할 수있는 기능을 제공합니다.

웹 응용 프로그램의 URL에 의해 확인 된 자원으로 구성되어 있습니다. 다음은 HTML, CSS, 자바 스크립트, 이미지 또는 웹 응용 프로그램을 렌더링 할 필요 다른 원인이 될 수 있습니다. 그들의 주소를 추가하거나 삭제하는 새로운 웹 주소를 나타내는 웹 응용 프로그램의 저자에 의해 정기적으로 업데이트 할 수있는 매니페스트 파일로 복사 할 수 있습니다. 처음으로 네트워크에 연결하는 경우, 웹 브라우저는 HTML5 매니페스트 파일을 읽고 주어진 자원을 다운로드하여 로컬로 저장합니다. 그런 다음, 네트워크 연결이없는 상태에서, 웹 브라우저 대신 로컬 복사본으로 이동하고 웹 응용 프로그램을 오프라인 렌더링됩니다.


브라우저 지원

테이블의 숫자는 완전히 응용 프로그램 캐시를 지원하는 최초의 브라우저 버전을 지정합니다.

API
Application Cache 4.0 10.0 3.5 4.0 11.5

HTML 캐시 Manifest

아래의 예는 캐시 매니페스트와 HTML 문서 보여줍니다 (for offline browsing) :

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

<body>
The content of the document......
</body>

</html>
»그것을 자신을 시도

캐시 매니페스트 기본

작업 오프라인 애플리케이션을 위해서는, 캐시 매니페스트 파일은 웹 개발자가 작성해야합니다. 웹 응용 프로그램이 하나 개 이상의 페이지를 초과하는 경우에는 다음 각 페이지는 캐시 매니페스트를 가리키는 매니페스트 속성이 있어야합니다. 매니페스트를 참조하는 모든 페이지는 로컬로 저장됩니다. 캐시 매니페스트 파일은 서버의 다른 부분에있는 텍스트 파일입니다. 그것은 다음과 같은 콘텐츠 형식으로 제공해야합니다 :

text/cache-manifest

응용 프로그램 캐시를 사용하려면 포함 manifest 문서의의 속성 <html> 태그를 :

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

와 모든 페이지 manifest 사용자가 방문 할 때 지정된 속성은 캐시됩니다. 경우 manifest 속성이 지정되지 않은 페이지가 캐시되지 않습니다 (unless the page is specified directly in the manifest file) .

매니페스트 파일의 권장되는 파일 확장자는 : ".appcache"

매니페스트 파일이 함께 제공 될 필요가 correct media type 이다, "text/cache-manifest" . 웹 서버에 구성해야합니다.


매니페스트 파일

매니페스트 파일은 캐시 할 것을 브라우저에 알려주는 간단한 텍스트 파일입니다 (and what to never cache) .

매니페스트 파일은 세 섹션이 있습니다 :

  • CACHE MANIFEST - 그들이 처음 다운로드 한 후이 헤더 아래에 나열된 파일이 캐시됩니다
  • NETWORK - 파일은 서버에 대한 연결을 필요로이 헤더 아래에 나열하고, 캐시되지 않습니다
  • FALLBACK - 페이지에 액세스 할 수없는 경우이 헤더 아래에 나열된 파일은 대체 페이지를 지정합니다

CACHE MANIFEST

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

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

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

회로망

아래의 네트워크 섹션에서는 파일을 지정합니다 "login.asp" 캐시되지 않아야하고, 오프라인으로 사용할 수 없게됩니다 :

NETWORK:
login.asp

별표는 다른 모든 자원 / 파일이 인터넷 연결을 필요로 나타 내기 위해 사용할 수 있습니다 :

NETWORK:
*

FALLBACK

대체 섹션 아래에 지정합니다 "offline.html" 는 / HTML / 카탈로그에있는 모든 파일 대신에 제공됩니다 인터넷 연결을 설정할 수없는 경우 :

FALLBACK:
/html/ /offline.html

주 : 제 URI는 두번째 대체 인 자원이다.


캐시 업데이트

응용 프로그램이 캐시되면 다음 중 하나가 발생할 때까지,이 캐시 남아있다 :

  • 사용자는 브라우저의 캐시를 지 웁니다
  • 매니페스트 파일이 수정된다 (see tip below)
  • 응용 프로그램 캐시는 프로그램 업데이트됩니다

예 - 전체 캐시 매니페스트 파일

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

NETWORK:
login.asp

FALLBACK:
/html/ /offline.html

Tip: 로 시작하는 라인 "#" 주석 행입니다뿐만 아니라 다른 목적을 제공 할 수 있습니다. 응용 프로그램의 캐시는 경우에만 매니페스트 파일 변경 사항을 업데이트됩니다. 이미지를 편집하거나 자바 스크립트 기능을 변경할 경우 해당 변경 사항이 다시 캐시되지 않습니다. 주석 행에 날짜와 버전을 업데이트하면 브라우저를 다시 캐시에게 파일을 만드는 한 가지 방법입니다.


응용 프로그램 캐시에 대한 참고 사항

당신이 캐시 무엇에주의하십시오.

파일이 캐시되면, 브라우저는 서버에있는 파일을 변경하는 경우에도, 캐시 된 버전을 표시 할 것입니다. 브라우저가 캐시를 업데이트되도록하려면 매니페스트 파일을 변경해야합니다.

참고 : 브라우저 캐시 된 데이터에 대해 서로 다른 크기 제한이있을 수 있습니다 (some browsers have a 5MB limit per site) .