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

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

青灯夜游

풀어 주다： 2018-09-08 17:07:42

원래의

1599명이 탐색했습니다.

이 장에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!