HTML5에서 오프라인 웹 애플리케이션을 생성하기 위한 샘플 코드
- 黄舟원래의
- 2017-03-15 15:57:241703검색
오프라인 애플리케이션캐시 기능을 사용하면 웹 애플리케이션에 필요한 모든 리소스를 지정할 수 있습니다.
이렇게 하면 브라우저가 HTML 문서를 로드할 때 모두 다운로드할 수 있습니다.
1) 브라우저 캐시 정의:
오프라인 캐싱 활성화 - 매니페스트 파일을 생성하고 html 요소 ifest 속성 에서 참조합니다. >
오프라인 애플리케이션에 캐시할 리소스를 지정합니다. 매니페스트 파일 상단이나 CACHE 영역에 리소스를 나열합니다.리소스를 사용할 수 없을 때 표시할 백업 콘텐츠를 지정하세요. 매니페스트 파일의 F
ALLBACK 영역에 콘텐츠를 나열하세요. 🎜>은 항상 서버에서 요청되는 리소스를 가리킵니다. 콘텐츠는 매니페스트 파일의 BETWORK 영역에 나열됩니다. 예: 먼저 Fruit.appcache의 매니페스트 파일을 만듭니다.
CACHE MANIFEST
example.html
banana100.png
FALLBACK:
* 404.html
NETWORK:
cherries100.png
CACHE:
apple100.png링크가 가리키는 html 파일이 오프라인 캐시에 없으면 404.html 파일을 다시 생성하세요
<!DOCTYPE HTML>
<html manifest="fruit.appcache">
<head>
<title>Offline</title>
</head>
<body>
<h1>您要的页面找不到了！</h1>
或许您可以帮我们找找孩子！
</body>
</html>
마지막으로 오프라인 캐싱을 활성화해야 하는 h
tml 파일을 생성합니다
<!DOCTYPE HTML>
<html manifest="fruit.appcache">
<head>
<title>Example</title>
<style>
img {border: medium double black; padding: 5px; margin: 5px;}
</style>
</head>
<body>
<img id="imgtarget" src="banana100.png"/>
<p>
<button id="banana">Banana</button>
<button id="apple">Apple</button>
<button id="cherries">Cherries</button>
</p>
<a href="otherpage.html">Link to another page</a>
<script>
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = handleButtonPress;
}
function handleButtonPress(e) {
document.getElementById("imgtarget").src = e.target.id + "100.png";
}
</script>
</body>
</html>2) 브라우저 감지상태:
window.navigator.online - 브라우저가 다음으로 결정되면 false를 반환합니다. 오프라인이어야 하며, 브라우저가 온라인이면 true를 반환합니다.
window를 호출할 수 있습니다. .applicationCache 속성은 오프라인 캐시를 직접 사용하여 ApplicationCache
객체; 🎜>를 반환합니다date()——
캐시를 업데이트하여 목록의 모든 항목이 최신 버전을 다운로드했는지 확인합니다.
swapCache() ——현재 캐시를 최신 캐시로 교체합니다.
3.1) ApplicationCache 객체 의 상태 속성 값:
0——캐시되지 않음——이 문서는 캐시되지 않았거나 캐시 데이터가 아직 다운로드되지 않았습니다.
1——IDLE——캐시가 어떤 작업도 수행하지 않습니다. 2——CHECKING——浏览器正在检查清单或清单所指定项目的更新； 3——DOWNLOADING——浏览器正在下载清单或内容的更新； 4——UPDATEREADY——有更新后的缓存数据可用； 5——OBSOLETE——缓存数据已经废弃，不应该再使用了。这是请求清单文件时返回HTTP状态码4xx所造成的 （通常表明清单文件已被移走/删除）； 3.2）ApplicationCache对象定义的事件，在缓存状态改变时触发： checking——浏览器正在获取初始清单或者检查清单更新； noupdate——没有更新可用，当前的清单是最新版； downloading——浏览器正在下载清单里指定的内容； progress——在下载阶段中触发； cached——清单里指定的所有内容都已被下载和缓存了； updateready——新资源已下载并且可以使用了； obsolete——缓存已废弃；CACHE MANIFEST
CACHE:
example.html
banana100.png
cherries100.png
apple100.png
FALLBACK:
* offline2.html
<!DOCTYPE HTML>
<html manifest="fruit.appcache">
<head>
<title>Example</title>
<style>
img {border: medium double black; padding: 5px; margin: 5px;}
p {margin-top: 10px; margin-bottom: 10px}
table {margin: 10px; border-collapse: collapse;}
th, td {padding: 2px;}
body > * {float: left;}
</style>
</head>
<body>
<p>
<img id="imgtarget" src="banana100.png"/>
<p>
<button id="banana">Banana</button>
<button id="apple">Apple</button>
<button id="cherries">Cherries</button>
</p>
<p>
<button id="update">Update</button>
<button id="swap">Swap Cache</button>
</p>
The status is: <span id="status"></span>
</p>
<table id="eventtable" border="1">
<tr><th>Event Type</th></tr>
</table>
<script>
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = handleButtonPress;
}
window.applicationCache.onchecking = handleEvent;
window.applicationCache.onnoupdate = handleEvent;
window.applicationCache.ondownloading = handleEvent;
window.applicationCache.onupdateready = handleEvent;
window.applicationCache.oncached = handleEvent;
window.applicationCache.onobselete = handleEvent;
function handleEvent(e) {
document.getElementById("eventtable").innerHTML +=
"<tr><td>" + e.type + "</td></td>";
checkStatus();
}
function handleButtonPress(e) {
switch (e.target.id) {
case 'swap':
window.applicationCache.swapCache();
break;
case 'update':
window.applicationCache.update();
checkStatus();
break;
default:
document.getElementById("imgtarget").src = e.target.id
+ "100.png";
}
}
function checkStatus() {
var statusNames = ["UNCACHED", "IDLE", "CHECKING", "DOWNLOADING",
"UPDATEREADY", "OBSOLETE"];
var status = window.applicationCache.status;
document.getElementById("status").innerHTML = statusNames[status];
}
</script>
</body>
</html>
위 내용은 HTML5에서 오프라인 웹 애플리케이션을 생성하기 위한 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!