HTML5 기본 튜토리얼

HTML5 API

HTML5 미디어

HTML5 그래픽

HTML5 애플리케이션 캐시

HTML을 사용하여5cache manifest 파일을 생성하여 웹 애플리케이션의 오프라인 버전을 쉽게 생성할 수 있습니다. 애플리케이션 캐시를 도입하면서 웹 애플리케이션은 클라이언트 캐시를 수행할 수 있으며, 네트워크 연결이 없을 때도 오프라인으로 접근할 수 있습니다.

애플리케이션 캐시(Application Cache)는 무엇인가요

HTML5 웹 애플리케이션을 오프라인으로 실행할 수 있는 애플리케이션 캐시 기계를 제공합니다. 개발자는 Application Cache (AppCache) 인터페이스를 사용하여 브라우저가缓存해야 하는 자원을 설정하고, 오프라인 사용자에게 사용 가능하게 할 수 있습니다. 오프라인 상태에서 사용자가 새로고침 버튼을 클릭하더라도, 애플리케이션이 정상적으로 로드되고 작동합니다.

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

오프라인 탐색 - 사용자는 애플리케이션이 오프라인 상태일 때도 사용할 수 있습니다
속도 - 캐시된 자원이 더 빠르게 로드됩니다
서버 부하를 줄입니다 - 브라우저는 업데이트되거나 변경된 자원만 서버에서 다운로드합니다.

어떤 브라우저가 지원하나요

Internet Explorer 10, Firefox, Chrome, Safari, Opera는 애플리케이션 캐시를 지원합니다.

HTML5 　캐시 메니페스트 예제

아래 예제는 캐시 메니페스트가 포함된 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
/style.css
/logo.png
/main.js

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

NETWORK

아래 NETWORK 섹션에서 파일 "login.php"은 항상 캐시에 저장되지 않으며, 오프라인 상태에서 사용할 수 없습니다：

NETWORK:
login.php

별표(*)를 사용하여 모든 다른 자원을 지정할 수 있습니다/모든 파일은 네트워크 연결이 필요합니다：

NETWORK:
*FALLBACK

아래 FALLBACK 섹션에서 네트워크 연결을 설정할 수 없을 때 "offline.html"를 대체하도록 정의합니다 /html5/ 디렉토리에 있는 모든 파일：

FALLBACK:
/html/　/index.html

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

캐시 업데이트

애플리케이션이 캐시에 저장되면, 다음 상황이 발생할 때까지 캐시가 유지됩니다：

사용자가 브라우저 캐시를 비우습니다
manifest 파일이 수정되었습니다（아래의 주의사항 참조）
프로그램이 애플리케이션 캐시를 업데이트합니다

완전한 Manifest 파일 예제

CACHE MANIFEST
#　2018-02-21　v1.1.1
/style.css
/logo.png
/main.js
NETWORK:
login.php
FALLBACK:
/html/　/index.html

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

애플리케이션 캐시에 대한 설명

캐시 내용을 주의하세요.

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

주의: 브라우저는 캐시 데이터의 용량 제한이 다를 수 있습니다. (일부 브라우저는 각 사이트별로 제한을 설정합니다.) 5MB).

HTML5 Web Workers HTML 5 로컬 데이터베이스