웹 기반 애플리케이션에는 오프라인 액세스가 점점 더 중요 해지고 있습니다. 모든 브라우저에는 캐싱 메커니즘이 있지만 신뢰할 수있는 것은 아니며 항상 예상되는 역할을 수행하지는 않습니다. HTML5는 ApplicationCache 인터페이스를 사용하여 오프라인 사용으로 인한 일부 문제를 해결합니다.
캐시 인터페이스를 사용하면 응용 프로그램에 다음 세 가지 이점이 있습니다 .오프라인 브라우징 - 사용자는 오프라인에서 전체 웹 사이트를 탐색 할 수 있습니다.
속도 - 캐시 된 자원은 로컬 리소스이므로 더 빨리로드됩니다.
서버로드 - 브라우저는 변경된 서버에서 리소스 만 다운로드합니다.
App Cache (AppCache라고도 함)를 사용하면 개발자가 오프라인 사용자가 액세스 할 수있는 브라우저가 캐시 해야하는 파일을 지정할 수 있습니다. 오프라인시 사용자가 새로 고침 버튼을 누르더라도 앱이 일반적으로로드 및 실행됩니다.
캐시 매니페스트 파일
캐시 매니페스트 파일은 브라우저가 오프라인 액세스를 위해 캐시 해야하는 리소스를 나열하는 간단한 텍스트 파일입니다.
참조 manifest 파일
응용 프로그램에 대한 응용 프로그램 캐싱을 활성화하려면 문서의 HTML 태그에 매니페스트 속성을 추가하십시오.
<html manifest = "example.appcache">
...
</html>
캐시하려는 웹 앱의 각 페이지에 매니페스트 속성을 추가해야합니다. 페이지에 매니페스트 속성이 포함되어 있지 않으면 브라우저는 페이지를 캐시하지 않습니다 (매니페스트 파일에 명시 적으로 나열되지 않는 한). 이는 사용자가 매니페스트로 탐색하는 모든 웹 페이지가 응용 프로그램 캐시에 암시 적으로 추가 될 것임을 의미합니다. 따라서 목록에 각 페이지를 나열 할 필요가 없습니다.
매니페스트 속성은 절대 URL 또는 상대 경로를 가리킬 수 있지만 절대 URL은 해당 네트워크 응용 프로그램과 동일해야합니다. 매니페스트 파일은 파일 확장자를 사용할 수 있지만 올바른 MIME 유형이 제공되어야합니다 (아래 참조).
<html manifest = "http://www.example.com/example.mf">
...
</html>
매니페스트 파일은 텍스트/캐시 관리 MIME 유형에 제공되어야합니다. 웹 서버 또는 .htaccess 구성에 사용자 정의 파일 유형을 추가해야 할 수도 있습니다.
예를 들어, Apache 에서이 MIME 유형을 제공하려면 구성 파일에 다음 줄을 추가하십시오.
AddType Text/Cache-Manifest .appcache app.yaml 파일 에이 MIME 유형을 제공하려면 다음을 추가하십시오.
-URL :/mystaticdir/(.*/.appcache)
static_files : mystaticdir // 1
MIME_TYPE : Text/Cache-Manifest
업로드 : MystaticDir /(.*/. AppCache) 파일 구조를 매니페스트합니다
간단한 목록 형식은 다음과 같습니다.
캐시가 나타납니다
index.html
스타일 시트 .CSS
이미지/로고 .png
스크립트/main.js이 예제는이 매니페스트 파일을 지정하는 웹 페이지의 4 개의 파일을 캐시합니다.
다음과 같은 점은 다음과 같이주의를 기울여야합니다.
캐시 매니페스트 문자열은 첫 번째 줄에 있어야하며 필수적입니다.
웹 사이트의 캐시 된 데이터 금액은 5MB를 초과하지 않아야합니다. 그러나 Chrome Web Store 용 앱을 작성하는 경우 UnlimitedStorage를 사용하여 제한을 무제한으로 만들 수 있습니다.
매니페스트 파일 또는 지정된 리소스를 다운로드 할 수없는 경우 전체 캐시 업데이트 프로세스를 수행 할 수 없습니다. 이 경우 브라우저는 원래 응용 프로그램 캐시를 계속 사용합니다.
더 복잡한 예를 살펴 보겠습니다.
캐시가 나타납니다
# 2010-06-18 : v2
# '마스터 항목'을 명시 적으로 캐시했습니다.
캐시 :/favicon.ico
index.html
스타일 시트 .CSS
이미지/로고 .png
스크립트/main.js
# 사용자가 온라인 상태가 필요한 리소스.
네트워크 :login.php
/myapi
http://api.twitter.com
# static.html main.py가 접근 할 수없는 경우 제공됩니다
# offline.jpg는 이미지/큰/의 모든 이미지 대신에 제공됩니다.
# offline.html은 다른 모든 .html 파일 대신에 제공됩니다.
폴백 :/main.py /static.html
이미지/large/images/offline.jpg
*.html /offline.html #로 시작하는 줄은 댓글 줄이지만 다른 목적으로도 사용할 수 있습니다. 앱 캐시는 매니페스트 파일이 변경되는 경우에만 업데이트됩니다. 예를 들어, 이미지 리소스를 수정하거나 JavaScript 함수를 변경하면 이러한 변경 사항은 재구성되지 않습니다. 브라우저가 캐시 된 파일을 새로 고치게하려면 매니페스트 파일 자체를 수정해야합니다. 생성 된 버전 번호, 파일 해시 값 또는 타임 스탬프로 댓글 줄을 생성하여 사용자가 최신 버전의 소프트웨어를 얻을 수 있도록합니다. 업데이트 캐시 섹션에 설명 된대로 새 버전이 나타나면 캐시를 프로그래밍 방식으로 업데이트 할 수도 있습니다.
목록에는 캐시, 네트워크 및 폴백의 세 가지 부분이 포함될 수 있습니다.
캐시 :이것은 항목의 기본 부분입니다. 이 헤더 아래에 나열된 파일은 처음으로 명시 적으로 캐시됩니다 (또는 캐시 매니페스트 직후 파일).
네트워크 :이 섹션에 나열된 파일은 서버에 연결 해야하는 화이트리스트 리소스입니다. 이러한 리소스에 대한 모든 요청은 사용자가 오프라인인지 아닌지에 관계없이 캐시를 우회합니다. 와일드 카드를 사용할 수 있습니다.
폴백 :이 섹션은 선택 사항이며 리소스에 액세스 할 수없는 경우 폴백 페이지를 지정하는 데 사용됩니다. 첫 번째 URI는 리소스를 나타내고 두 번째는 백업 웹 페이지를 나타냅니다. 두 URI는 모두 관련되어야하며 Manifest 파일과 동일한 원산지 여야합니다. 와일드 카드를 사용할 수 있습니다.
참고 :이 섹션은 순서대로 정렬 할 수 있으며 각 섹션은 동일한 목록에서 반복 할 수 있습니다.
다음 목록은 사용자가 웹 사이트 오프라인의 루트에 액세스하려고 시도 할 때 표시되는 포괄적 인 웹 페이지 (Offline.html)를 정의하며 원격 사이트의 다른 자원과 같은 다른 모든 리소스에 인터넷 연결이 필요하다는 것을 나타냅니다.
캐시가 나타납니다
# 2010-06-18 : V3
# 명시 적으로 캐시 된 항목
index.html
CSS/Style.CSS
# offline.html은 사용자가 오프라인 인 경우 표시됩니다.
폴백 :
//offline.html
# 기타 모든 리소스 (예 : 사이트)는 사용자가 온라인 상태가되어야합니다.
회로망:
*
# 캐시에 대한 추가 리소스
은닉처:
이미지/로고 1.png
이미지/logo2.png
Images/Logo3.png : 시스템은 매니페스트 파일을 참조하는 HTML 파일을 자동으로 캐시합니다. 따라서 목록에 추가 할 필요는 없지만 그렇게하는 것이 좋습니다.
참고 : SSL을 통해 제공되는 웹 페이지에 대해 HTTP 캐시 헤더 및 캐시 제한 사항은 캐시 매니페스트로 대체됩니다. 따라서 HTTPS가 제공하는 웹 페이지는 오프라인으로 실행될 수 있습니다. 캐시 업데이트다음 중 하나가 발생하지 않는 한 앱은 오프라인 후에 캐싱 상태를 유지합니다.
사용자는 웹 사이트에서 브라우저의 데이터 저장소를 지 웁니다.
매니페스트 파일이 수정되었습니다. 참고 : Manifest에 나열된 파일을 업데이트한다고해서 브라우저가 리소스를 다시 캐시한다는 의미는 아닙니다. 매니페스트 파일 자체는 변경해야합니다.
응용 프로그램 캐시는 프로그래밍 방식으로 업데이트됩니다.
캐시 상태Window.applicationCache 객체는 브라우저의 응용 프로그램 캐시에 대한 프로그래밍 방식 액세스 방법입니다. 상태 속성은 캐시의 현재 상태를 보는 데 사용될 수 있습니다.
var appCache = Window.applicationCache;
스위치 (appcache.status) {
CASE APPCACHE.UNCHACHED : // uncCHED == 0
'삭제되지 않은'반환;
부서지다;
case appcache.idle : // idle == 1
반환 '유휴';
부서지다;
CASE APPCACHE.CHECKING : // Checking == 2
'확인'반품;
부서지다;
Case AppCache.Downloading : // 다운로드 == 3
반환 '다운로드';
부서지다;
CASE APPCACHE.UPDATEREADY : // updateReady == 4
반품 '업데이트 레디';
부서지다;
CASE APPCACHE.OBSOLETE : // OBSOLETE == 5
'쓸모없는'반환;
부서지다;
기본:
'u 알려진 캐시 상태'를 반환합니다.
부서지다;
};
캐시를 프로그래밍 방식으로 업데이트하려면 ApplicationCache.UpDate ()를 먼저 호출하십시오. 이것은 사용자의 캐시를 업데이트하려고 시도합니다 (매니페스트 파일이 변경된 경우). 마지막으로 ApplicationCache.Status가 업데이트 레디 상태에 있으면 ApplicationCache.SwapCache ()를 호출하여 원래 캐시를 새 캐시로 바꾸십시오.
var appCache = Window.applicationCache;
appcache.update (); // 사용자의 캐시를 업데이트하려고합니다.
...
if (AppCache.status == Window.applicationCache.UpDaterEady) {
AppCache.SupCache (); // 가져 오기가 성공적이었습니다. 새 캐시를 교체하십시오.
}
참고 : Update () 및 SwapCache ()를 사용하면 사용자에게 업데이트 된 리소스를 제공하지 않습니다. 이 프로세스를 사용하면 브라우저가 새로운 매니페스트를 확인하고 지정된 업데이트를 다운로드하고 앱 캐시를 리필 할 수 있습니다. 따라서 새 컨텐츠가 사용자에게 제공되기 전에 웹 페이지를 두 번 다시로드해야하며 첫 번째는 새 응용 프로그램 캐시를 얻는 것이며 두 번째는 웹 페이지 컨텐츠를 새로 고치는 것입니다.좋은 소식은 재 장전의 번거 로움을 두 번 피할 수 있다는 것입니다. 사용자를 최신 버전의 웹 사이트로 업데이트하려면 웹 페이지가로드 될 때 다음을 모니터링 할 수있는 리스너를 설정하십시오.
// 페이지로드에서 새 캐시를 사용할 수 있는지 확인하십시오.
window.addeventListener ( 'load', function (e) {
window.applicationCache.AddeventListener ( 'updateReady', function (e) {
if (window.applicationCache.status == Window.applicationCache.UpDaterEady) {
// 브라우저는 새로운 앱 캐시를 다운로드했습니다.
// 새로운 뜨거운 성을 얻으려면 페이지를 바꾸고 페이지를 다시로드하십시오.
Window.applicationCache.SwapCache ();
if ( '이 사이트의 새 버전을 사용할 수 있습니다.로드?')) {
Window.location.reload ();
}
} 또 다른 {
// 매니페스트는 변경되지 않았습니다. 서버에 새로운 것은 없습니다.
}
}, 거짓);
}, 거짓);
AppCache 이벤트예상대로 추가 이벤트는 캐시의 상태를 듣는 데 사용됩니다. 브라우저는 다운로드 진행, 응용 프로그램 캐시 업데이트 및 오류 상태를 위해 해당 이벤트를 트리거합니다. 다음 코드 스 니펫은 각 캐시 이벤트 유형에 대한 이벤트 리스너를 설정합니다.
함수 handleCacheevent (e) {
// ...
}
함수 handleCacheError (e) {
ALERT ( '오류 : 캐시가 업데이트되지 않았다!');
};
// 매니페스트의 첫 번째 캐시 후에 발사되었습니다.
AppCache.addeventListener ( '캐시드', HandleCacheevent, False);
// 업데이트를 확인합니다. 항상 첫 번째 이벤트는 순서대로 발사되었습니다.
AppCache.addeventListener ( 'Checking', HandleCacheevent, False);
// 업데이트가 발견되었습니다. 브라우저는 리소스를 가져오고 있습니다.
AppCache.addeventListener ( '다운로드', HandleCacheevent, False);
// 매니페스트는 404 또는 410을 반환하고 다운로드가 실패했습니다.
// 또는 다운로드가 진행되는 동안 매니페스트가 변경되었습니다.
AppCache.AddeventListener ( '오류', HandleCacheError, False);
// 매니페스트를 처음 다운로드 한 후 해고되었습니다.
appcache.addeventListener ( 'noupdate', handlecacheevent, false);
// 매니페스트 파일이 404 또는 410을 반환하는 경우 해고되었습니다.
// 이로 인해 응용 프로그램 캐시가 삭제됩니다.
AppCache.addeventListener ( '쓸모없는', HandleCacheevent, False);
// 가져 오기에 따라 매니페스트에 나열된 각 리소스에 대해 발사되었습니다.
AppCache.addeventListener ( 'Progress', HandleCacheevent, False);
// 매니페스트 리소스가 새로 레드로드되었을 때 해고되었습니다.
appcache.addeventListener ( 'updateReady', handlecacheevent, false);
매니페스트 파일 또는 지정된 리소스를 다운로드 할 수없는 경우 전체 업데이트가 실패합니다. 이 경우 브라우저는 원래 응용 프로그램 캐시를 계속 사용합니다.