이 장에서는 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 'UNCACHED';
break;
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
break;
case appCache.UPDATEREADY: // UPDATEREADY == 4
return 'UPDATEREADY';
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
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'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('test').value = new Date();
}, 1000);로그인 후 복사
#🎜🎜 #
위 내용은 html5에서 애플리케이션 캐시를 구현하는 방법은 무엇입니까? 오프라인 저장 기술에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
