HTML5는 ApplicationCache 인터페이스를 사용하여 오프라인 캐싱 기술을 구현하여 오프라인 문제를 해결합니다._html5 튜토리얼 기술

소개
웹 기반 애플리케이션에서는 오프라인 액세스가 점점 더 중요해지고 있습니다. 모든 브라우저에는 캐싱 메커니즘이 있지만 신뢰할 수 없으며 항상 예상대로 작동하지 않을 수도 있습니다. HTML5는 오프라인으로 인해 발생하는 일부 문제를 해결하기 위해 ApplicationCache 인터페이스를 사용합니다.
캐시 인터페이스를 사용하면 애플리케이션에 다음과 같은 세 가지 이점이 있습니다:
오프라인 검색 – 사용자는 오프라인에서도 전체 웹사이트를 검색할 수 있습니다.
속도 – 캐시된 리소스는 로컬 리소스이므로 로딩 속도가 빨라졌습니다.
서버 부하 감소 - 브라우저는 변경된 서버에서만 리소스를 다운로드합니다.

애플리케이션 캐시(AppCache라고도 함)를 사용하면 개발자는 브라우저가 오프라인 사용자를 위해 캐시해야 하는 파일을 지정할 수 있습니다. 사용자가 오프라인 상태에서 새로 고침 버튼을 눌러도 앱은 정상적으로 로드되고 실행됩니다.
캐시 매니페스트 파일
캐시 매니페스트 파일은 브라우저가 오프라인 액세스를 위해 캐시해야 하는 리소스를 나열하는 간단한 텍스트 파일입니다.
매니페스트 파일 참조
애플리케이션에 대한 애플리케이션 캐싱을 활성화하려면 문서의 html 태그에 매니페스트 속성을 추가하세요.

코드 복사

코드는 다음과 같습니다.

...
🎜>

캐시하려는 웹 애플리케이션의 모든 페이지에 매니페스트 속성을 추가해야 합니다. 웹 페이지에 매니페스트 속성이 포함되어 있지 않으면 브라우저는 해당 속성이 매니페스트 파일에 명시적으로 나열되지 않는 한 페이지를 캐시하지 않습니다. 이는 사용자가 탐색하는 매니페스트가 포함된 모든 웹 페이지가 암시적으로 애플리케이션 캐시에 추가된다는 의미입니다. 따라서 인벤토리의 모든 페이지를 나열할 필요는 없습니다.
매니페스트 속성은 절대 URL 또는 상대 경로를 가리킬 수 있지만 절대 URL은 해당 웹 애플리케이션과 동일한 출처를 가져야 합니다. 매니페스트 파일은 모든 파일 확장자를 사용할 수 있지만 올바른 MIME 유형으로 제공되어야 합니다(아래 참조).

코드 복사코드는 다음과 같습니다.

...



매니페스트 파일은 text/cache-manifest MIME 유형으로 제공되어야 합니다. 웹 서버 또는 .htaccess 구성에 사용자 정의 파일 형식을 추가해야 할 수도 있습니다.
예를 들어 Apache에서 이 MIME 유형을 제공하려면 구성 파일에 다음 줄을 추가하세요.
AddType text/cache-manifest .appcache Google App Engine의 app.yaml 파일 MIME 유형에 이를 제공하려면 다음:
- url: /mystaticdir/(.*.appcache)
static_files: mystaticdir/1
mime_type: text/cache-manifest
업로드: mystaticdir/(.*.appcache) 매니페스트 파일 구조
간단한 매니페스트 형식은 다음과 같습니다.
CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js 이 예에서는 4개를 캐시합니다. 이 매니페스트 파일을 지정하는 웹 페이지의 파일입니다.
다음 사항에 주의해야 합니다.
CACHE MANIFEST 문자열은 첫 번째 줄에 있어야 하며 필수입니다.
웹사이트의 캐시된 데이터 크기는 5MB를 초과할 수 없습니다. 그러나 Chrome 웹 스토어용 앱을 작성하는 경우 unlimitedStorage를 사용하여 이 제한을 제거할 수 있습니다.
매니페스트 파일이나 여기에 지정된 리소스를 다운로드할 수 없는 경우 전체 캐시 업데이트 프로세스가 진행되지 않습니다. 이 경우 브라우저는 원래 애플리케이션 캐시를 계속 사용합니다.
더 복잡한 예를 살펴보겠습니다.
CACHE MANIFEST
# 2010-06-18:v2
# 명시적으로 캐시된 '마스터 항목'
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js
# 사용자가 온라인 상태여야 하는 리소스
네트워크:
login.php
/myapi
http://api.twitter.com
# main.py에 액세스할 수 없는 경우 static.html이 제공됩니다.
# 오프라인.jpg는 Images/large/의 모든 이미지 대신 제공됩니다.
# 오프라인.html은 다른 모든 .html 파일 대신 제공됩니다
FALLBACK:
/ main.py /static.html
images/large/images/offline.jpg
*.html /offline.html "#"으로 시작하는 줄은 주석 줄이지만 다른 목적으로도 사용할 수 있습니다. 앱 캐시는 매니페스트 파일이 변경될 때만 업데이트됩니다. 예를 들어 이미지 리소스를 수정하거나 JavaScript 기능을 변경하는 경우 해당 변경 사항은 다시 캐시되지 않습니다. 브라우저가 캐시 파일을 새로 고칠 수 있도록 매니페스트 파일 자체를 수정해야 합니다. 생성된 버전 번호, 파일 해시 또는 타임스탬프가 포함된 주석 줄을 생성하면 사용자가 최신 버전의 소프트웨어를 사용할 수 있습니다. 캐시 업데이트 섹션에 설명된 대로 새 버전이 출시되면 프로그래밍 방식으로 캐시를 업데이트할 수도 있습니다.
매니페스트에는 CACHE, NETWORK 및 FALLBACK의 세 가지 섹션이 포함될 수 있습니다.
캐시:
항목의 기본 부분입니다. 이 헤더 아래에 나열된 파일(또는 CACHE MANIFEST 바로 다음 파일)은 처음 다운로드될 때 명시적으로 캐시됩니다.
네트워크:
이 섹션에 나열된 파일은 서버에 연결해야 하는 화이트리스트 리소스입니다. 이러한 리소스에 대한 모든 요청은 사용자가 오프라인인지 여부에 관계없이 캐시를 우회합니다. 와일드카드 문자를 사용할 수 있습니다.
FALLBACK:
이 섹션은 선택 사항이며 리소스에 액세스할 수 없는 경우 대체 페이지를 지정하는 데 사용됩니다. 첫 번째 URI는 리소스를 나타내고 두 번째 URI는 대체 웹 페이지를 나타냅니다. 두 URI는 모두 관련되어 있어야 하며 매니페스트 파일과 원본이 동일해야 합니다. 와일드카드 문자를 사용할 수 있습니다.
참고: 이러한 섹션은 순서에 관계없이 정렬될 수 있으며 각 섹션은 동일한 목록에 반복적으로 나타날 수 있습니다.
다음 목록은 사용자가 사이트의 루트에 오프라인으로 액세스하려고 할 때 표시되는 "포괄적인" 페이지(offline.html)를 정의하고, 다른 모든 리소스(예: 원격 사이트에 있는 리소스)에는 인터넷 연결.
캐시 매니페스트
# 2010-06-18:v3
# 명시적으로 캐시된 항목
index.html
css/style.css
# 오프라인.html은 사용자가 표시되는 경우 표시됩니다. 오프라인입니다
폴백:
/ /offline.html
# 다른 모든 리소스(예: 사이트)에서는 사용자가 온라인 상태여야 합니다.
네트워크:
*
# 캐시할 추가 리소스입니다.
캐시:
images/logo1.png
images/logo2.png
images/logo3.png 참고: 매니페스트 파일을 참조하는 HTML 파일은 자동으로 캐시됩니다. 따라서 목록에 추가할 필요는 없지만 추가하는 것이 좋습니다.
참고: SSL을 통해 제공되는 페이지에 설정된 HTTP 캐시 헤더 및 캐시 제한은 캐시 매니페스트로 대체됩니다. 따라서 https를 통해 제공되는 웹페이지는 오프라인으로 실행될 수 있습니다.

캐시 업데이트
다음 중 하나가 발생하지 않는 한 오프라인 상태에서 앱은 캐시된 상태로 유지됩니다.
사용자가 웹사이트에 대한 브라우저의 데이터 저장소를 지웁니다.
매니페스트 파일이 수정되었습니다. 참고: 매니페스트에 나열된 파일을 업데이트한다고 해서 브라우저가 리소스를 다시 캐시한다는 의미는 아닙니다. 매니페스트 파일 자체를 변경해야 합니다.
앱 캐시는 프로그래밍 방식으로 업데이트됩니다.

캐시 상태
window.applicationCache 개체는 브라우저의 애플리케이션 캐시에 대한 프로그래밍 방식의 액세스를 제공합니다. 상태 속성을 사용하여 캐시의 현재 상태를 볼 수 있습니다.

코드 복사

코드는 다음과 같습니다.

var appCache = window.applicationCache
switch ( appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break
case appCache.IDLE: // IDLE == 1
'IDLE' 반환
break;
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING'
case appCache.DOWNLOADING; == 3
return 'DOWNLOADING';
break
case appCache.UPDATEREADY: // UPDATEREADY == 4
return 'UPDATEREADY'
case appCache.OBSOLETE : // OBSOLETE == 5
return 'OBSOLETE';
기본값:
return 'UKNOWN CACHE STATUS'


캐시를 프로그래밍 방식으로 업데이트하려면 먼저 applicationCache.update()를 호출하세요. 이 작업은 사용자의 캐시 업데이트를 시도합니다(매니페스트 파일이 변경된 경우). 마지막으로 applicationCache.status가 UPDATEREADY 상태이면 applicationCache.swapCache()를 호출하여 원래 캐시를 새 캐시로 교체합니다.

코드 복사

코드는 다음과 같습니다. var appCache = window.applicationCache ; appCache.update(); // 사용자 캐시 업데이트를 시도합니다.

...

if (appCache.status == window.applicationCache.UPDATEREADY) {

appCache.swapCache() ; // 가져오기가 성공했습니다.
}



참고
: 이런 방식으로 update() 및 swapCache()를 사용하면 사용자 업데이트된 리소스. 이 프로세스를 통해 브라우저는 새 매니페스트를 확인하고, 지정된 업데이트를 다운로드하고, 앱 캐시를 다시 채울 수 있습니다. 따라서 사용자에게 새 콘텐츠를 제공하려면 웹 페이지를 두 번 다시 로드해야 하며, 첫 번째는 새 애플리케이션 캐시를 얻고, 두 번째는 웹 페이지 콘텐츠를 새로 고쳐야 합니다.
좋은 소식은 두 번 다시 로드해야 하는 번거로움을 피할 수 있다는 것입니다. 사용자를 최신 버전의 웹사이트로 업데이트하려면 웹페이지가 로드될 때 updateready 이벤트를 수신하도록 리스너를 설정하면 됩니다.

코드 복사

코드는 다음과 같습니다. // 페이지 로드 시 새 캐시를 사용할 수 있는지 확인하세요. window.addEventListener('load', function( e) {

window.applicationCache.addEventListener('updateready', function(e) {

if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {

// 브라우저가 새 앱을 다운로드했습니다.
// 새로운 기능을 얻으려면 페이지를 교체하고 다시 로드하세요.
window.applicationCache.swapCache()
if (confirm('이 사이트의 새 버전을 사용할 수 있습니다. 로드하세요. ?')) {
window.location.reload();
}
} else {
// 서버에 새로운 내용은 없습니다. , false);
}, false );



APPCACHE 이벤트

예상할 수 있듯이 캐시 상태를 모니터링하는 데 추가 이벤트가 사용됩니다. 브라우저는 다운로드 진행률, 애플리케이션 캐시 업데이트, 오류 상태 등에 대한 해당 이벤트를 트리거합니다. 다음 코드 조각은 각 캐시 이벤트 유형에 대한 이벤트 리스너를 설정합니다.

코드 복사


코드는 다음과 같습니다.

function handlerCacheEvent(e) {
//...
}
function handlerCacheError(e) {
alert('오류: 캐시를 업데이트하지 못했습니다!');
};
// 매니페스트의 첫 번째 캐시 이후에 실행됩니다.
appCache.addEventListener('cached', handlerCacheEvent, false);
// 업데이트를 확인하는 중입니다. 항상 시퀀스에서 첫 번째 이벤트가 시작됩니다.
appCache.addEventListener('checking', handlerCacheEvent, false);
// 업데이트가 발견되었습니다. 브라우저가 리소스를 가져오는 중입니다.
appCache.addEventListener('downloading', handlerCacheEvent, false);
// 매니페스트가 404 또는 410을 반환하고, 다운로드에 실패했습니다.
// 또는 다운로드가 진행되는 동안 매니페스트가 변경되었습니다.
appCache.addEventListener('error', handlerCacheError, false);
// 매니페스트를 처음 다운로드한 후 실행됩니다.
appCache.addEventListener('noupdate', handlerCacheEvent, false);
// 매니페스트 파일이 404 또는 410을 반환하면 시작됩니다.
// 이로 인해 애플리케이션 캐시가 삭제됩니다.
appCache.addEventListener('obsolete', handlerCacheEvent, false);
// 매니페스트를 가져오는 동안 매니페스트에 나열된 각 리소스에 대해 실행됩니다.
appCache.addEventListener('progress', handlerCacheEvent, false);
// 매니페스트 리소스가 새로 다시 다운로드되면 시작됩니다.
appCache.addEventListener('updateready', handlerCacheEvent, false);

如果清单文件或其中指 마음대로 资源无法下载，整个更新city将失败。 에서 这种情况下，浏览器将继续使사용원천용缓存