>  기사  >  웹 프론트엔드  >  HTML5-오프라인 API에 대한 간략한 소개

HTML5-오프라인 API에 대한 간략한 소개

黄舟
黄舟원래의
2017-04-01 11:37:051770검색

1. 브라우저 지원 감지

안됨

2. 온라인 및 오프라인 상태 감지 및

if
(window.application
Cache
) { 
      // this browser supports offline applications 
   }

3.manifest

오프라인 기능을 사용하려면 07e6e06e0dc95dc83bb70d14dca11cbe 태그 .manifest 확장자를 가진 매니페스트 파일, 오프라인으로 캐시해야 하는 리소스, 캐시할 필요가 없는 리소스, 실패한 요청 교체 페이지가 모두 매니페스트 파일에 나열됩니다. 또한 매니페스트 파일의 MIME 유형은 text/cache-manifest여야 하며 이 MIME 유형은 서버 측에서 정의되어야 합니다. 목록의 첫 번째 줄에는
댓글을 추가할 수 없습니다. 실패한 요청 부분에는 두 가지 측면이 포함됩니다. 첫 번째는 요청될 콘텐츠이며, 두 번째는 실패한 요청의 대체 콘텐츠입니다. 캐시를 업데이트해야 하는 경우 매니페스트 파일만 업데이트하면 브라우저가 자동으로 모든 캐시를 업데이트합니다. 그러나 매니페스트 파일이 캐시되지 않은 경우(기본적으로 캐시됨) 서버의 캐시 설정을 수정하여 이 문제를 해결할 수 있습니다. 예시는 다음과 같습니다:

CACHE MANIFEST # 파운드 기호 동작
주석. 다음 "CACHE:"는 생략 가능
CACHE:

// When the page loads, 
set
 the status to online or offline 
   function loadDemo() { 
      if (navigator.onLine) { 
         log("Online"); 
      } 
else
 { 
         log("Offline"); 
      } 
   } 
   // Now add event 
list
eners to notify a change in online status 
   window.addEventListener("online", function(e) { 
     log("Online"); 
   }, true); 
   window.addEventListener("offline", function(e) { 
     log("Offline"); 
   }, true);
#가입 페이지를 캐시하지 않음 #별표(*)를 사용하면 모든 내용이 명시적으로 캐시되지 않습니다. 어떤 리소스도 캐시되지 않습니다.
NETWORK
signup.html

  # 
file
s to cache 
   about.html 
   
html5
.css 
   index.html 
   happy-trails-rc.gif 
   lake-tahoe.JPG

4.applicationCache
개체

window.applicationCache 개체는 웹 오프라인 애플리케이션입니다.

API의 핵심 개체

, 캐시 상태 속성 window.applicationCache.status 및 캐시 상태와 관련된 일부 이벤트 속성을 포함합니다. 5. 캐시 상태 및 이벤트
window.applicationCache.status에는 다음과 같은 6개의 값이 있습니다. •0( UNCACHED ): oncached 이벤트 속성에 해당, 캐시 없음 •1 ( IDLE ): oncached 이벤트 속성에 따라 캐시 목록의 모든 리소스는 캐시 상태입니다.

•2(CHECKING) : onchecking 이벤트 속성에 해당하며 캐시를 확인합니다.

•3(DOWNLOADING) : ondownloading 이벤트 속성, 다운로드 캐시에 해당합니다.
•4(UPDATEREADY) : onupdateready 이벤트 속성에 해당하며 캐시 업데이트를 준비합니다.
•5(OBSOLETE): onobsolete 이벤트 속성에 해당하여 리소스가 캐시되었지만 목록에는 없습니다.
세 가지 이벤트 속성도 있습니다.
•onerror: 오류가 발생합니다.
•onnoupdate: 사용 가능한 업데이트가 없습니다.
•onprogress: 캐시가 업데이트되는 중입니다.

6.window.applicationCache.update() 메소드
새 버전의 매니페스트 파일 확인 및 필요한 새 리소스 다운로드를 포함하여 캐시를 업데이트하도록 브라우저에 요청하려면 이 메소드를 호출하세요. 캐시가 없거나 캐시가 오래되면 오류가 발생합니다.

위 내용은 HTML5-오프라인 API에 대한 간략한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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