Mobile 5‎ > ‎

Application Cache


본 샘플은 OS2.1, OS 2.2 이후 버젼에서 실행이 필요합니다.

실행결과


HTML5의 Application Cache의 구조와 GoogleのGoogle Font API ( http://code.google.com/apis/webfonts/ ) 를 사용한 실험을 해보았습니다.

Application Cache를 유효하게 하는데는 index.html의 <html>태그를

<html manifest="droidget.manifest">

로 설정, droidget.manifest의 1행에 CACHE MANIFEST 로 기재하고, 캐싱하고싶은 파일명을 열거해 나갑니다.

CACHE MANIFEST
index.html
http://fonts.googleapis.com/css



<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>

을 정의함으로써 Web FONT를 집어 넣습니다.


한번 집어넣은 Web API는 로컬에 캐싱되므로 다음부터는 Web에 문의하지 않고 사용하는것이 가능하게 됩니다.

config 편집

src/config.xml
<?xml version="1.0" encoding="UTF-8"?>
<widget id="UAAgent_1281148337204" version="1.0" width="300" height="200">
<content src="index.html" type="text/html"/>
<name>Font API Test</name>
<description>Application Cache Test</description>
<author url="http://www.gclue.com"></author>
<icon src="icon.png"/>
<access uri="http://googleapis.com" subdomains="true" />
<access uri="http://googleusercontent.com" subdomains="true" />
<license>(C)2010 GClue K.K</license>
</widget>

index 편집


src/index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html manifest="droidget.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
</head>
<body>
FONT API TEST
</body>
</html>

Manifest 작성


src/droidget.manifest
CACHE MANIFEST
index.html
http://fonts.googleapis.com/css


Comments