집 > 기사 > 웹 프론트엔드 > html5에서 애플리케이션 캐시를 구현하는 방법은 무엇입니까? 오프라인 저장 기술에 대한 간략한 설명

html5에서 애플리케이션 캐시를 구현하는 방법은 무엇입니까? 오프라인 저장 기술에 대한 간략한 설명

青灯夜游원래의: 2018-09-08 17:07:421557검색

이 장에서는 html5를 사용하여 애플리케이션 캐시를 구현하는 방법을 소개하겠습니다. 오프라인 저장 기술에 대해 간략하게 설명해주세요. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

HTML5 이전에는 페이지에 액세스하려면 인터넷에 연결해야 했습니다. 그러나 모바일 인터넷의 등장으로 기기 단말기의 위치는 더 이상 고정되지 않습니다. 모바일 장치는 무선 신호에 크게 의존하지만 무선 네트워크의 안정성은 안정적이지 않습니다. 예를 들어 터널을 통과하거나 신호 강도가 약한 장소에서는 웹사이트에 액세스할 수 없습니다. 따라서 HTML5의 오프라인 캐싱은 의심의 여지가 없습니다. (applicationCache)는 이 문제를 해결합니다.

1: 오프라인 캐싱이란
applicationCache라고도 알려진 HTML5 오프라인 캐시는 HTML5의 새로운 기능 중 하나입니다. 간단히 이해하면 캐시를 삭제하지 않고도 데이터가 캐시되어 다음 번에 네트워크 없이 로드될 수 있다는 것입니다. 웹페이지나 게임을 정적 데이터와 비교하는 데 사용하기 쉽습니다. 물론 모든 브라우저가 Html5의 새로운 기능을 지원할 수 있는 것은 아니며 오프라인 캐싱도 마찬가지입니다. 어쨌든 IE9(포함)과 IE9 이하의 브라우저는 현재 지원되지 않습니다. 모바일에서 사용하는 경우 지원되어야 합니다. 오프라인 캐싱이 지원되는지 여부를 검색하는 것도 비교적 간단합니다.

<script>
    if(window.applicationCache){
        alert("支持离线缓存");
    }
    else{
        alert("不支持离线缓存");
    }
</script>

2: 사용 방법

HTML5 오프라인 캐시는 브라우저의 캐시와 분리된 캐시 영역으로, 이 캐시에 데이터를 저장하려면 설명 파일(. 매니페스트)에는 다운로드하고 캐시해야 하는 리소스가 나열되어 있습니다.

1. 매니페스트 파일

<!DOCTYPE html>
<html>
<head>
<!--就是在这里引入，注意引入也是讲究路劲跟文件名的，
      这里文件名是test，后缀是mainfest，路劲在当前的html下面
     （一般放在html当前文件夹下面也没什么问题，我是这么放的）-->
<html manifest="test.manifest">
<meta charset="UTF-8">
<title>html5 离线缓存</title>
</head>
<body>
</body>
</html>

2을 가져옵니다. 소개가 완료되면 다음 단계는 test.mainfest 파일 코드를 작성하는 것입니다.

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

매니페스트 파일은 세 부분으로 나눌 수 있습니다:
①캐시 매니페스트 - 이 제목 아래에 나열된 파일은 첫 번째 다운로드 후 캐시됩니다
②네트워크 - 이 제목 아래에 나열된 파일은 서버에 연결해야 하며 캐시되지 않습니다
③FALLBACK - 이 제목 아래 나열된 파일은 페이지에 액세스할 수 없을 때(예: 404 페이지) 대체 페이지를 지정합니다.

전체 코드

CACHE MANIFEST//必须以这个开头
version 1.0 //最好定义版本，更新的时候只需修改版本号
CACHE:
    m.png
    test.js
    test.css
NETWORK:
    *
FALLBACK
    online.html offline.html

매니페스트 파일을 구성해야 합니다. MIME 유형, 즉 "text/cache-manifest"가 웹 서버에 올바르게 구성되어 있습니다.

분석:
#으로 시작하는 줄은 주석을 나타냅니다. CACHE 아래의 파일은 모두 캐시된 파일입니다. NETWORK는 네트워크에서 요청한 후 캐시될 때마다 지정된 파일이 항상 네트워크에서 최신 파일로 요청됨을 의미합니다. FALLBACK: 지정된 파일을 찾을 수 없으면 새 주소로 리디렉션됩니다. 규격은 모두 대문자로 표기합니다.

3. JS를 통해 동적으로 업데이트 제어

다음 상황 중 하나가 발생하지 않는 한 애플리케이션은 오프라인 상태 후에도 캐시된 상태로 유지됩니다.
삭제됨 귀하의 웹사이트의 사용자 브라우저 데이터 저장에 의해.
매니페스트 파일이 수정되었습니다.

참고: 매니페스트에 나열된 파일을 업데이트한다고 해서 브라우저가 리소스를 다시 캐시한다는 의미는 아닙니다. 매니페스트 파일 자체를 변경해야 합니다.

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

applicationCache.status의 값은 다음과 같습니다:
0 === 캐시되지 않음
1 === 유휴(캐시가 최신 상태입니다)
2 === 점검중
3 === 다운로드 중
4 === 업데이트 준비 완료
5 === 캐시 만료

var appCache = window.applicationCache; 
switch (appCache.status) { 
　　case appCache.UNCACHED: // UNCACHED == 0 
　　　　return &#39;UNCACHED&#39;; 
　　　　break; 
　　case appCache.IDLE: // IDLE == 1 
　　　　return &#39;IDLE&#39;; 
　　　　break; 
　　case appCache.CHECKING: // CHECKING == 2 
　　　　return &#39;CHECKING&#39;; 
　　　　break; 
　　case appCache.DOWNLOADING: // DOWNLOADING == 3 
　　　　return &#39;DOWNLOADING&#39;; 
　　　　break; 
　　case appCache.UPDATEREADY: // UPDATEREADY == 4 
　　　　return &#39;UPDATEREADY&#39;; 
　　　　break; 
　　case appCache.OBSOLETE: // OBSOLETE == 5 
　　　　return &#39;OBSOLETE&#39;; 
　　　　break; 
　　default: 
　　　　return &#39;UKNOWN CACHE STATUS&#39;; 
　　　　break; 
　　};

2) 캐시를 적극적으로 업데이트합니다: applicationCache.update()

<script>    //利用定时器隔一定时间自动更新一下缓存
    setInterval(function(){
            applicationCache.update();
    },50000);</script>

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

var appCache = window.applicationCache;
appCache.update(); // Attempt to update the user&#39;s cache.
...
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache();  // The fetch was successful, swap in the new cache.

4. 간단한 오프라인 캐싱 애플리케이션

다음 4개 파일을 포함하는 웹 프로젝트 AppCache를 만듭니다.
appcache_offline.html
#🎜 🎜#

<html manifest="test.manifest">
<head>
<title>AppCache Test</title>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
</head>
<body>
<p><output id="test"></output></p>
<div id="log"></div>
</body>
</html>

매니페스트 파일: test.manifest

CACHE MANIFEST
#VERSION 1.0
CACHE:
test.css

test.css

output { font: 2em sans-serif; }

test.js

setTimeout(function () {
document.getElementById(&#39;test&#39;).value = new Date();
}, 1000);

#🎜🎜 #

위 내용은 html5에서 애플리케이션 캐시를 구현하는 방법은 무엇입니까? 오프라인 저장 기술에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html5 JS 对象

성명：

이전 기사：플러그인 번호 스크롤 플러그인 numberAnimate.js를 사용하는 방법은 무엇입니까?다음 기사：플러그인 번호 스크롤 플러그인 numberAnimate.js를 사용하는 방법은 무엇입니까?