<!doctype html>
<html manifest="cache.manifest">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>제이쿼리 모바일 연습</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<style>
@import url("./common.css");
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<!--
Application Cache : 오프라인 환경을 고려해서 Local에서 동작할 수 있는 앱이 되도록 또는 트래픽을 최소화하기 위해서 사용하는 기능이다.
기본적으로 Html, js, css 등의 문서 파일들과 각종 이미지 파일들을 임시영역에 저장할 수 있도록 지원하는 기능이다.
Application Cache는 전적으로 웹어플리케이션이 관리 한다. 따라서, 캐시된 파일을 업데이트 할지 하지말아야 할지를 웹어플리케이션이 결정할 수 있고, 오프라인 환경에서 캐쉬되어 있는 파일을 확인할 수 있다.
역할 :
1. 오프라인 지원 : 한번 사이트에 접속하면 파일을 다운로드 해서, 사용자가 오프라인 환경일 때에 사이트를 접근할 수 있도록 한다.
2. 속도향상:
지정한 모든 파일을 로컬에 저장해 두므로, 훨씬 빠른 속도로 페이지를 표시할 수 있다. 일반적으로 전체사이트에 공유되는 js, css 파일들은 초기에 한번만 다운로드 해놓으면 그 후에는 다운로드 없이 빠르게 재사용할 수 있다.
3. 서버부하 줄인다.
캐쉬된 파일들이 업데이트가 되었는지만 체크하고 업데이트되지 않았다면 다운로드를 하지 않으므로 서버에서는 파일전송에 대한 부하가 줄어들게 된다.
** Application Cache 사용방법
각페이지의 html 태그에 다음과 같이 manifest 속성에 manifest파일을 지정한다.
manifest파일은 텍스트 형식의 파일이면 되며, 파일이름이나 확장자는 제한이 없다.
<!DOCTYPE> 설정이 되어 있어야 하며,
<!DOCTYPE html>
<html manifest="./aaa.manifest">
...
</html>
[[[ 매니페스트 파일의 형식]]]
맨 첫줄에는 반드시 CACHE MANIFEST라는 용어를 사용해야 하며,
CACHE:, NETWORK:, FALLBACK: 이 세개의 헤더정보가 포함되야 한다.
CACHE - 이 헤더에 명시된 파일들은 맨 처음 로드되고 나서 캐시에 저장된다.
NETWORK - 이 헤더에 명시된 파일들은 무조건 네트워크에서만 불러 올 수 있다.
만약에 오프라인 환경이라면 이 파일들은 절대로 캐쉬된 파일로 사용될 수 없다.
FALLBACK - 이 헤더에 명시된 파일들은 로딩에 실패 했을 경우에 대신 사용할 파일들을 지정한다.
예> aa.jpg bb.jpg >>> 이 의미는 aa.jpg파일 로딩에 실패한 경우 bb.jpg를
자동으로 로딩한다라는 의미이다.
-->
<body>
<div data-role="page" id="firstPg">
<div data-role="header" data-position="fixed" id="header">
<h3>Application Cache</h3>
</div><!-- header -->
<div role="main" class="ui-content">
<img src="./a.png"/><br/>
<img src="./b.png"/><br/>
<img src="./c.png"/>
</div><!-- main -->
<div data-role="footer" data-position="fixed">
<h3>footer</h3>
</div><!-- footer -->
</div><!-- page1 -->
</body>
</html>
common.css
@charset "utf-8";
#firstPg{
background:#ddd;
}
common.js
window.onload=function(){
}
cache.manifest
CACHE MANIFEST
# 주석시 사용하는 기호는 '#' 이다.
# 매니페스트에 명시된 파일은 한번 브라우저에 캐쉬된 이후 다시 갱신되지 않는다.
# 만일 캐쉬된 파일이 수정되어서 다시 캐쉬를 갱신해야 하는 경우에는 매니페스트 파일의
# 내용을 수정해야한다.
# 매니페스트 파일을 수정하는 경우에는 날짜나 버전을 변경하여 처리한다.
# 그럴경우 주석처리해서 표시한다.
# manifest version : v1.0 2016-01-21
CACHE:
./common.css
./common.js
./a.png
NETWORK:
./b.png
FALLBACK:
./c.png ./a.png
'기존카테고리 > 하이브리드앱' 카테고리의 다른 글
| mobile API - changePage (0) | 2017.11.05 |
|---|---|
| 디바이스 방향계 (0) | 2017.11.04 |
| [jQuery Mobile] 미디어 플레이어 조작 (0) | 2017.11.04 |
| 구글 MAP API (0) | 2017.11.04 |
| [jQuery Mobile] GeoLocation (0) | 2017.11.03 |