HTML5 애플리케이션 캐시

애플리케이션 캐시를 사용하여 캐시 맨이파일을 생성하여 웹 애플리케이션의 오프라인 버전을 쉽게 생성할 수 있습니다.

애플리케이션 캐시는 무엇인가요?

HTML5는 애플리케이션 캐시(Application Cache)를 도입했습니다. 이는 웹 애플리케이션을 캐시할 수 있으며 인터넷 연결 없이도 접근할 수 있다는 것을 의미합니다.

애플리케이션 캐시는 앱에 세 가지 이점을 제공합니다:

  1. 오프라인 브라우징 - 사용자는 앱이 오프라인 상태에서 사용할 수 있습니다
  2. 속도 - 캐시된 리소스가 더 빠르게 로드됩니다
  3. 서버 부하를 줄이기 - 브라우저는 업데이트되거나 변경된 리소스 만 서버에서 다운로드합니다

브라우저 지원

표의 숫자는 애플리케이션 캐시를 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

API
애플리케이션 캐시 4.0 10.0 3.5 4.0 11.5

HTML Cache Manifest 예제

다음은 cache manifest를 포함한 HTML 문서(오프라인 브라우징을 위해)를 보여줍니다：

예제

!DOCTYPE HTML
<html manifest="demo.appcache">
<body>
문서 내용 ......
</body>
</html>

직접 시험해보세요

Cache Manifest 기본

애플리케이션 캐시를 활성화하려면, 문서의 <html> 태그에 manifest 속성을 포함하십시오：

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

manifest를 지정한 각 페이지는 사용자가 접근할 때마다 캐시에 저장됩니다. manifest 속성을 지정하지 않으면 페이지는 캐시에 저장되지 않습니다(manifest 파일에서 직접 해당 페이지를 지정한 경우를 제외하고).

manifest 파일의 권장 파일 확장자는 ".appcache"입니다。

주의하세요：manifest 파일은 올바른 MIME-type을 설정해야 하며, "text/cache-manifest"입니다. 웹 서버에서 설정해야 합니다.

Manifest 파일

manifest 파일은 간단한 텍스트 파일로, 브라우저가 캐시에 저장할 내용(또는 캐시에 저장하지 않을 내용)을 알려줍니다.

manifest 파일은 세 부분으로 구성되어 있습니다：

  • CACHE MANIFEST - 이 제목 아래에 나열된 파일은 최초 다운로드 후 캐시에 저장됩니다
  • NETWORK - 이 제목 아래에 나열된 파일은 서버와의 연결이 필요하며 캐시에 저장되지 않습니다
  • FALLBACK - 이 제목 아래에 나열된 파일은 페이지에 접근할 수 없을 때의 대체 페이지(예: 404 페이지)를 정의합니다

CACHE MANIFEST

첫 번째 행, CACHE MANIFEST는 필수입니다：

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

위의 manifest 파일은 세 가지 자원을 나열합니다: 하나의 CSS 파일, 하나의 GIF 이미지, 그리고 하나의 JavaScript 파일. manifest 파일이 로드되면, 브라우저는 웹 사이트의 루트 디렉토리에서 이 세 가지 파일을 다운로드합니다. 그런 다음, 사용자가 언제든지 인터넷과 연결을 끊는다 하더라도, 이 자원들은 여전히 사용할 수 있습니다.

NETWORK

下面的 NETWORK 부분은 파일 "login.php" 가 영원히 캐시에 저장되지 않으며, 오프라인 상태에서 사용할 수 없도록 정의되어 있습니다：

NETWORK:
login.asp

스타일러스를 사용하여 모든 다른 자원/파일이 인터넷 연결이 필요하다는 것을 나타낼 수 있습니다:

NETWORK:
*
FALLBACK

아래의 FALLBACK 부분은 인터넷 연결을 설정할 수 없을 때, /html/ 디렉토리에 있는 모든 파일을 "offline.html"로 대체하도록 규정합니다:

FALLBACK:
/html/ /offline.html

주의事项:첫 번째 URI는 자원이고 두 번째는 대체입니다.

캐시 업데이트

애플리케이션이 캐시되면, 다음과 같은 경우에만 캐시가 유지됩니다:

  • 사용자가 브라우저 캐시를 비우면
  • manifest 파일이 수정되었습니다. 아래의 힌트를 참조하세요.
  • 프로그램으로 애플리케이션 캐시 업데이트

예제 - 완전한 Cache Manifest 파일

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html

ヒント:"#"로 시작하는 것은 주석 행입니다. 하지만 다른 용도에도 사용될 수 있습니다. 애플리케이션의 캐시는 manifest 파일이 변경될 때만 업데이트됩니다. 이미지를 편집하거나 JavaScript 함수를 수정하면 이러한 변경 사항은 다시 캐시되지 않습니다. 주석 행의 날짜와 버전 번호를 업데이트하는 것은 브라우저가 파일을 다시 캐시하는 방법 중 하나입니다.

애플리케이션 캐시에 대한 주의사항

캐시 내용을 주의하세요.

파일이 캐시에 저장되면, 브라우저는 서버에서 파일을 변경했더라도 캐시된 버전을 계속 표시합니다. 브라우저가 캐시를 업데이트하려면 manifest 파일을 업데이트해야 합니다.

주의事项:브라우저가 캐시 데이터의 용량 제한이 다를 수 있습니다. (일부 브라우저의 제한은 각 사이트당 5MB입니다).