APPLICATION CACHE
(ie는 지원하지 않는다.)
웹 어플리케이션을 오프라인에서도 사용할 수 있도록 웹 어플리케이션이 필요로 하는 리소스를 클라이언트 쪽에 캐시하는 기능이다.
모바일 기기에서 유용하게 쓰인다. network 상태가 좋지 않은 장소에서 사용할 수 있을 것이다.
그리고 network 사용도 줄어 배터리 관리에도 도움이 된다.
Manifest 작성
오프라인 웹 어플리케이션은 오프라인 상태에서 웹 어플리케이션을 동작시키기 위해서 캐시를 사용한다.
그리고 캐시를 사용하기 위해서는 어떤 파일들을 캐시해야 하는 지 알려주어야 하는데,
이때 사용하는 것이 manifest이다.
먼저 manifest파일은 브라우저에 의해서 다운로드 되는 파일이므로 웹 서버에 manifest파일에 대해 등록해 주어야 한다.(하단 참조)
우선 Project Explorer - Servers - Tomcat v7.0 Server at localhost-config - web.xml 에서
<mime-mapping> <extension>manifest</extension> <mime-type>text/cache-manifest</mime-type> </mime-mapping>
추가를 한다.
그리고
cache.manifest 파일을 만들어
CACHE MANIFEST
#cache version 1.0
CACHE:
cache.js
common.css
image/img01.jpg
image/img02.jpg
NETWORK:
image/img03.jpg
추가한다.(img01.jpg, img02.jpg, img03.jpg 는 아무 이미지 파일을 하면 된다.)
common.css
.my{
background-color: #ffffff;
margin: 0px;
padding: 3px;
border: 5px solid #cccccc;
font-family: verdana, aral;
font-size: 22px;
line-height: 18px;
color: #666666;
}
img{
width: 200px;
height: 200px;
}
해당 프로그램을 실행하게 될 메인
applicationCacheTest.html
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> -->
<link rel="stylesheet" type="text/css" href="common.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="cache.js"></script>
<script type="text/javascript">
if (supports_offline()) {
alert("브라우저가 어플리케이션 캐시를 지원함");
} else {
alert("브라우저가 어플리케이션 캐시를 지원안함");
}
</script>
</head>
<body>
<div class="my">어플리케이션 표시</div>
<img alt="그림1" src="image/img01.jpg"><br/>
<img alt="그림2" src="image/img02.jpg"><br/>
<img alt="그림3" src="image/img03.jpg"><br/>
</body>
</html>
'Study > HTML5,CSS,JQuery' 카테고리의 다른 글
| [HTML5/CSS3/JQUERY] web worker (1) | 2019.05.22 |
|---|---|
| [HTML5/CSS3/JQUERY] web storage (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] channel message (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] cross message (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] message event (0) | 2019.05.22 |
