简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  HTML5 오프라인 캐시 Manifest_html5 튜토리얼 기술이란 무엇입니까?

HTML5 오프라인 캐시 Manifest_html5 튜토리얼 기술이란 무엇입니까?

WBOY
WBOY원래의
2016-05-16 15:51:341944검색

웹 앱은 성능 및 트래픽 고려 사항이 점점 더 중요해지고 있습니다. 브라우저에는 캐싱 메커니즘이 있지만 일반적으로 HTML 파일을 캐시할 수 없는 경우가 많습니다. 인터넷 이후에는 모든 것이 끝났습니다.

매니페스트란 무엇인가요?

간단히 말하면 매니페스트를 사용하면 네트워크 연결 없이도 애플리케이션에 액세스할 수 있습니다.

세 가지 주요 장점이 있습니다 :

1. 오프라인 브라우징, 네트워크 없이도 정상적으로 접속 가능

2. 로딩 속도가 빨라지고 캐시된 로컬 액세스 속도도 자연스럽게 빨라집니다.

3. 서비스 요청 부담을 줄입니다. 파일이 캐시된 후에는 다시 요청할 필요가 없으며 업데이트해야 하는 파일만 가능합니다.

사용방법은?

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >
  2. <html 매니페스트="demo. appcache">
  3. ...
  4. html>
캐시하려는 웹 앱의 모든 페이지에 매니페스트 속성을 포함해야 합니다. 페이지에 매니페스트 속성이 없으면 캐시되지 않습니다(페이지가 매니페스트 파일에 명시적으로 지정되지 않은 경우). 이는 사용자가 방문한 페이지에 매니페스트 속성이 포함되어 있으면 애플리케이션 캐시에 추가된다는 의미입니다. 이런 방식으로 매니페스트 파일에 캐시해야 하는 페이지를 지정할 필요가 없습니다.

Manifest 속성은 절대 URL 또는 상대 경로를 지정할 수 있습니다. 그러나 절대 URL은 웹 앱과 동일한 출처에서 시작되어야 합니다. 매니페스트 파일은 모든 확장 파일 형식일 수 있지만 Apache에

을 추가하는 것과 같이 올바른 MIME 형식을 가져야 합니다.

"AddType 텍스트/cache-manifest .appcache".

매니페스트 파일

매니페스트 파일은 캐시된 항목과 캐시되지 않은 항목을 브라우저에 알려주는 간단한 텍스트 파일입니다.

매니페스트 파일은 세 부분으로 나눌 수 있습니다.

캐시 매니페스트 - 이 제목 아래 나열된 파일은 파일의
네트워크 - 를 처음 다운로드한 후 캐시됩니다. 이 제목 아래 나열된 파일은 서버에 대한 연결이 필요하며 캐시되지 않습니다.
FALLBACK - 이 제목 아래 나열된 파일은 페이지에 연결할 수 없는 경우 대체를 지정합니다. 페이지(예: 404 페이지)

완전한 매니페스트 파일:

XML/HTML 코드클립보드에 콘텐츠 복사
  1. 캐시 매니페스트
  2. # 2012-02-21 v1.0.0
  3. /theme.css
  4. /logo.gif
  5. /main.js
  7. 네트워크:
  8. login.asp
  10. 폴백:
  11. /html5/ /404.html
CACHE MANIFEST가 필요합니다. # 뒤에는 주석이 옵니다. 다음은 캐시해야 하고 상대 경로가 필요한 파일입니다. NETWORK는 각 요청과 함께 로드되어야 합니다.

별표는 다른 모든 리소스/파일에 인터넷 연결이 필요함을 나타내는 데 사용할 수 있습니다.

NETWORK:*

FALLBACK은 인터넷 연결인 경우입니다. 연결을 설정할 수 없는 경우 "404.html"을 사용하여 /html5/ 디렉터리의 모든 파일을 바꾸십시오.

업데이트 메커니즘 매니페스트 캐시를 업데이트하는 방법에는 세 가지가 있습니다.
1. 사용자가 브라우저 캐시를 삭제합니다.
2. 댓글입니다 (댓글로 수정해서 파일 업데이트 가능)
3. 프로그램별 업데이트

캐시 상태window.applicationCache 속성을 통해 프로그램 내에서 캐시 상태를 확인할 수 있습니다.

C/C 코드클립보드에 콘텐츠 복사
  1. var appCache = window.applicationCache;   
  2.     
  3. 전환 (appCache.status) {   
  4.     
  5.   사례 appCache.UNCACHED: // 캐시되지 않음 == 0   
  6.     
  7.     반환 '캐시되지 않음';   
  8.     
  9.     휴식;   
  10.     
  11.   케이스 appCache.IDLE: // IDLE == 1   
  12.     
  13.     반환 '유휴';   
  14.     
  15.     휴식;   
  16.     
  17.   케이스 appCache.CHECKING: // CHECKING == 2   
  18.     
  19.     반품 '확인 중';   
  20.     
  21.     휴식;   
  22.     
  23.   케이스 appCache.DOWNLOADING: // 다운로드 중 == 3   
  24.     
  25.     반환 '다운로드 중';   
  26.     
  27.     휴식;   
  28.     
  29.   케이스 appCache.UPDATEREADY:  // UPDATEREADY == 4   
  30.     
  31.     반환 '업데이트 준비 완료';   
  32.     
  33.     휴식;   
  34.     
  35.   케이스 appCache.OBSOLETE: // OBSOLETE == 5   
  36.     
  37.     반품 '단종';   
  38.     
  39.     휴식;   
  40.     
  41.   기본값:   
  42.     
  43.     반환 '알 수 없는 캐시 상태';   
  44.     
  45.     휴식;   
  46.     
  47. };   
  48.   

캐시를 프로그래밍 방식으로 업데이트하려면 먼저 applicationCache.update()를 호출하세요. 그러면 사용자의 캐시 업데이트가 시도됩니다(매니페스트 파일이 변경되어야 함). 마지막으로 applicationCache.status가 UPDATEREADY 상태일 때 applicationCache.swapCache()를 호출하면 이전 캐시가 새 캐시로 교체됩니다.

C/C 코드클립보드에 콘텐츠 복사
  1. var appCache = window.applicationCache
  3. appCache.update(); // 사용자 캐시 업데이트를 시도합니다.
  5. …
  7. if (appCache.status == window.applicationCache.UPDATEREADY) {
  9. appCache.swapCache(); // 가져오기에 성공했습니다.
  11. }

참고: 이와 같이 update() 및 swapCache()를 사용하면 업데이트된 리소스가 사용자에게 표시되지 않습니다. 이를 통해 브라우저는 매니페스트 파일이 업데이트되었는지 확인한 다음 지정된 업데이트 콘텐츠를 다운로드하고 앱 캐시를 다시 채울 수 있습니다. 따라서 사용자가 업데이트된 콘텐츠를 보려면 두 개의 페이지 다운로드가 필요합니다. 하나는 앱 캐시를 업데이트하고 다른 하나는 페이지 콘텐츠를 업데이트하는 것입니다.

사용자가 사이트의 최신 버전을 볼 수 있도록 하려면 페이지가 로드될 때 updateready 이벤트를 수신하도록 리스너를 설정하세요.

C/C 코드클립보드에 콘텐츠 복사
  1. // 페이지 로드 시 새 캐시를 사용할 수 있는지 확인하세요.
  3. window.addEventListener('load', function(e) {
  5. window.applicationCache.addEventListener('updateready', function(e) {
  7. if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
  9.  // 브라우저가 새 앱 캐시를 다운로드했습니다.
  11.  // 새로운 매력을 얻으려면 페이지를 교체하고 새로고침하세요.
  13. window.applicationCache.swapCache()
  14. window.location.reload()
  16. } 그밖에 {
  18.  // 매니페스트는 변경되지 않았습니다.
  20. }
  22. }, 거짓)
  24. }, 거짓)

이벤트를 듣고 그에 따라 다양한 상태를 처리합니다.

C/C 코드클립보드에 콘텐츠 복사
  1. var appCache = window.applicationCache
  3. // 매니페스트의 첫 번째 캐시 이후에 실행됩니다.
  5. appCache.addEventListener('cached', handlerCacheEvent, false);
  7. // 업데이트를 확인하는 중입니다. 항상 순서대로 첫 번째 이벤트가 시작됩니다.
    8. appCache.addEventListener('checking', handlerCacheEvent,
  8. false
    9. );
    10. // 브라우저가 리소스를 가져오는 중입니다.
  11. appCache.addEventListener('다운로드 중', handlerCacheEvent,
    12. false
  12. );
  13. // 매니페스트가 404 또는 410을 반환하고 다운로드에 실패했습니다.
  15. // 또는 다운로드가 진행되는 동안 매니페스트가 변경되었습니다.
  17. appCache.addEventListener('error', handlerCacheError, false
    18. );
  19. // 매니페스트를 처음 다운로드한 후 실행됩니다.
  21. appCache.addEventListener('noupdate', handlerCacheEvent, false);
  23. // 매니페스트 파일이 404 또는 410을 반환하면 시작됩니다.
  25. // 이로 인해 애플리케이션 캐시가 삭제됩니다.
    27. appCache.addEventListener('사용되지 않음', handlerCacheEvent,
  27. false)
  29. // 가져오는 동안 매니페스트에 나열된 각 리소스에 대해 실행됩니다.
    31. appCache.addEventListener('progress', handlerCacheEvent,
  31. false)
  33. // 매니페스트 리소스가 새로 다시 다운로드되면 시작됩니다.
    35. appCache.addEventListener('updateready', handlerCacheEvent,
  35. false)

  36. 매니페스트 파일이나 파일에 지정된 리소스를 다운로드하지 못하면 전체 업데이트가 실패합니다. 이 경우 브라우저는 계속해서 이전 애플리케이션 캐시를 시도합니다.

    참고:

    1. 사이트의 오프라인 저장 용량 제한은 5M입니다
    2. 매니페스트 파일 또는 내부에 나열된 파일을 정상적으로 다운로드할 수 없는 경우 전체 업데이트 프로세스가 실패한 것으로 간주되어 브라우저가 계속됩니다. 이전 캐시를 사용하려면
    3. 매니페스트를 참조하는 html은 매니페스트 파일과 동일한 출처와 동일한 도메인에 있어야 합니다.
    4. 매니페스트에 사용되는 상대 경로는 매니페스트입니다. 파일
    5. CACHE MANIFEST 문자열은 첫 번째 줄에 있어야 하며 필수
    6. 시스템은 매니페스트 파일을 참조하는 HTML 파일을 자동으로 캐시합니다
    7. NETWORK 및 FALLBACK의 위치 순서와 관련이 있습니다. 암시적 선언인 경우 Front
    8. FALLBACK의 리소스는 매니페스트 파일과 동일한 출처를 가져야 합니다
    9. 캐시되면 브라우저는 절대 경로를 직접 요청하고 캐시에 있는 리소스에도 액세스합니다.
    10. 사이트의 다른 페이지에 대해 매니페스트 속성이 설정되어 있지 않더라도 요청한 리소스가 캐시에 있으면 캐시에서 액세스합니다.
    11. 매니페스트 파일이 변경되면 리소스 요청 자체가 실행됩니다. 업데이트가 시작됩니다

    위 내용은 HTML5 오프라인 캐싱 매니페스트 관련 내용에 대한 소개입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

    원문: http://www.cnblogs.com/hutuzhu/p/4871666.html

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML5_html5 튜토리얼 팁의 의미론적 b 및 i 태그다음 기사：HTML5_html5 튜토리얼 팁의 의미론적 b 및 i 태그

관련 기사

더보기