이 시리즈의 정보

HTML 5는 매우 멋진 기술이지만 거기에는 그럴만한 이유가 있다. HTML 5는 데스크탑 애플리케이션의 기능을 브라우저로 가져오기 위한 기술적 전환점이 될 것으로 보인다. 기존 브라우저에서도 HTML 5의 장래가 유망하지만 모바일 브라우저에서 훨씬 더 잠재력이 있다. 게다가 가장 일반적으로 사용되는 모바일 브라우저에 이미 HTML 5 스펙 중 매우 중요한 부분이 채택되어 구현되었다. 다섯 개의 파트로 구성된 이 시리즈를 통해 HTML 5의 일부이며 모바일 웹 애플리케이션 개발에 중요한 영향을 미칠 수 있는 이러한 새로운 기술을 자세히 살펴볼 수 있다. 각 파트에서는 iPhone과 Android 기반 장치에 있는 것과 같은 최신 모바일 웹 브라우저에서 사용할 수 있는 HTML 5 기능을 확인할 수 있는 작동하는 모바일 웹 애플리케이션을 개발한다.

위로

전제 조건

이 기사에서는 최신 웹 기술을 사용하는 웹 애플리케이션을 개발한다. 이 기사에서 사용하는 코드의 대부분은 웹 애플리케이션 개발에 필요한 핵심 기술인 HTML, Javascript 및 CSS로 작성되었다. 가장 중요한 사항은 테스트할 브라우저에 있다. 몇 가지 예외가 있긴 하지만 이 기사에 있는 코드의 대부분은 최신 데스크탑 브라우저에서 실행된다. 물론, 모바일 브라우저에서도 코드를 테스트해야 하며 이를 위해 최신 iPhone과 Android SDK가 필요하다. 이 기사에서는 iPhone SDK 3.1.3와 Android SDK 2.1을 사용한다. 관련 링크는 참고자료를 확인하기 바란다.

위로

애플리케이션을 오프라인에서도 작동할 수 있게 해야 하는 이유

여러 가지 이유로 오프라인 웹 애플리케이션은 사용자와 개발자 모두에게 매력적이다. 대다수의 개발자들은 각 플랫폼에 적합한 특정 애플리케이션을 작성하기보다는 인기있는 모든 스마트폰에서 작동하는 하나의 웹 애플리케이션을 작성할 수 있기를 원한다. 단지, 개발자들에게 편리하다고 해서 그것이 사용자가 원하는 것이라고 볼 수는 없다. 이러한 이유로 모바일 웹 애플리케이션은 특정 모바일 웹 애플리케이션이 제공할 수 있는 기능과 동일한 기능을 대부분 제공할 수 있어야 한다. 오프라인에서 작동하는 것도 이러한 기능에 해당한다고 할 수 있다. 애플리케이션 유형(모바일 또는 데스크탑)에 관계없이 일부 애플리케이션은 데이터와 서비스를 대부분 인터넷을 통해 이용한다. 이러한 애플리케이션에서는 사용자가 인터넷에 연결된 상태가 좋지 않으면 기능이 저하될 수 있다. 그러나 단지 인터넷 연결 상태가 좋지 않다고 해서 애플리케이션의 작동이 완전히 중단되어서는 안 된다. 기존의 웹 애플리케이션에서는 이러한 상황이 필연적으로 발생하게 된다.

오프라인 기능을 이용하면 모바일 웹 애플리케이션을 데스크탑 애플리케이션과 유사하게 작동하게 할 수 있다. 또한, 몇 가지 다른 혜택도 얻을 수 있다. 웹 브라우저는 언제나 정적 자원을 캐시한다. 또한, 웹 서버에서 전송한 HTTP 응답 헤더의 메타데이터에 의존하여 페이지를 렌더링하는 데 필요한 이미지와 HTML, Javascript, CSS를 검색한다. 페이지를 렌더링하는 데 필요한 모든 자원이 캐시되면 페이지가 매우 빠르게 로드된다. 그러나 일부 자원이 캐시되지 않으면 이로 인해 모든 기능이 극도로 저하될 수 있다. 이러한 상황은 생각보다 자주 발생한다. 다른 모든 파일보다도 하나의 CSS 파일에 다양한 캐시 제어 헤더가 있었을 수 있으며 그렇지 않으면 할당된 공간 밖에서 브라우저가 실행 중이었기 때문에 캐시가 제거되었을 수도 있다.

오프라인 애플리케이션에서는 모든 자원이 캐시된다. 캐시에서 제공되지 말아야 하는 자원을 사용자가 제어할 수 있기는 하지만 브라우저는 언제나 캐시에서 모든 자원을 로드한다. 특별한 시간소인 매개변수를 Ajax GET 요청에 추가하여 브라우저에서 응답을 캐시하지 않게 하는 것이 일반적인 Ajax 핵이며 그렇지 않고 GET이 적합한 경우에 POST를 사용하면 상태가 훨씬 더 나빠진다. 오프라인이 지원되는 웹 애플리케이션에서는 이러한 핵이 필요 없다.

오프라인 애플리케이션은 기능이 우수하므로 작성하기가 복잡할 것 같다. 과연 그럴까? 실제로는 매우 단순하다. 다음과 같은 세 가지 작업을 수행하면 된다.

1. 온라인 매니페스트 파일 작성
2. 브라우저에 매니페스트 파일 정보 전달
3. 서버에서 MIME 유형 설정

위로

오프라인 매니페스트 파일

하나의 키 파일, 즉 애플리케이션용 캐시 매니페스트 파일이 필요하다. 이 파일을 통해 브라우저는 정확히 어떤 자원을 캐시해야 하고 캐시하지 말아야 하는지(선택사항) 인식한다. 애플리케이션에서는 이 파일이 핵심이 된다. Listing 1에는 간단한 캐시 매니페스트 파일에 대한 예가 표시되어 있다.

CACHE MANIFEST
# Version 0.1
offline.html
/iui/iui.js
/iui/iui.css
/iui/loading.gif
/iui/backButton.png
/iui/blueButton.png
/iui/cancel.png
/iui/grayButton.png
/iui/listArrow.png
/iui/listArrowSel.png
/iui/listGroup.png
/iui/pinstripes.png
/iui/redButton.png
/iui/selection.png
/iui/thumb.png
/iui/toggle.png
/iui/toggleOn.png
/iui/toolbar.png
/iui/whiteButton.png
/images/gymnastics.jpg
/images/soccer.png
/images/gym.jpg
/images/soccer.jpg

이 파일에는 애플리케이션에서 제대로 작동해야 하는 모든 파일이 표시되어 있다. 이러한 파일에는 HTML 파일과 Javascript, CSS 및 이미지가 포함된다. 또한, 비디오, PDF, XML 파일 등도 포함된다. 이 예제에 있는 모든 URL은 상대 URL이다. 모든 상대 URL은 캐시 매니페스트 파일에 상대적이어야 한다. 이 경우에는 캐시 매니페스트 파일이 웹 애플리케이션의 루트 디렉토리에 위치한다. Listing 2에 있는 디렉토리 구조를 Listing 1에 있는 상대 URL과 비교해 보자.

  Name
V images
    gymnastics.jpg
    soccer.png
V iui
    backButton.png
    blueButton.png
    cancel.png
    grayButton.png
    iui.css-logo-touch-icon.png
    iui.css
    iui.js
    iuix.css
    iuix.js
    listArrow.png
    listArrowSel.png
    listGroup.png
    loading.gif
    pinstripes.png
    redButton.png
    selection.png
    thumb.png
    toggle.png
    toggleOn.png
    toolbar.png
    toolButton.png
    whiteButton.png
  manifest.mf
  offline.html
> WEB-INF
 

이 애플리케이션에서는 iUI 프레임워크를 사용하고 있다. 이 프레임워크는 일반적으로 사용되는 JavaScript+CSS 킷으로 이 도구를 이용하면 모바일 웹 애플리케이션을 본래의 iPhone 애플리케이션과 비슷한 모양으로 만들 수 있다. Listing 1과 Listing 2에서 볼 수 있는 바와 같이 이 프레임워크에서는 Javascript 및 CSS 파일과 더불어 여러 개의 이미지를 사용한다. 그러나 이러한 모든 파일은 매니페스트 파일에 표시되어 있는 한 브라우저를 통해 캐시되어 오프라인 모드에서 사용될 수 있게 된다.

Listing 1에서 주목해야 할 또 다른 중요한 사항은 버전 정보이다. 버전 정보는 스펙에 포함되어 있지 않다. 사실상, 버전 정보는 매니페스트 파일에 있는 설명에 불과하다. 그러나 새 버전의 애플리케이션이 있다는 사실을 브라우저에 전달하는 데 사용할 수 있다는 점에서 이와 같은 정보가 있는 것이 중요하다. HTML이나 Javascript 또는 이미지가 변경되었다고 가정하자. 매니페스트 파일을 변경하지 않으면 브라우저는 수정한 자원의 새 버전을 로드하려고 하지 않는다. 캐시 매니페스트 파일에는 만기가 없으므로 사용자가 캐시를 지우거나 매니페스트 파일을 변경하지 않는 한, 모든 자원은 캐시 상태에 있게 된다. 브라우저는 새 매니페스트 파일이 있는지 확인한다. 새로운 매니페스트 파일을 나타내려면 기존 매니페스트 파일에서 무엇인가를 변경하기만 하면 된다. 페이지에서 HTML을 변경하는 예제로 다시 돌아가서 HTML을 변경하고 매니페스트 파일에서 버전 문자열을 변경하면 브라우저는 자원이 변경되었다는 사실을 인식하여 자원을 다시 로드한다. 설명에 버전 번호를 삽입하는 것이 이러한 라이프사이클을 관리할 수 있는 간단한 방법이다.

위로

브라우저에 매니페스트 파일 정보 전달

웹 애플리케이션에서 오프라인 캐싱을 가능하게 위해서는 한 가지를 더 확인해야 한다. 웹 브라우저는 사용자가 캐싱을 사용하려고 한다는 것과 캐시 매니페스트 파일을 찾을 위치를 인식해야 한다. Listing 3에는 이러한 기능을 구현하는 매우 간단한 방법이 표시되어 있다.

<!DOCTYPE html>
<html>
<html manifest="manifest.mf">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; 
        maximum-scale=1.0; user-scalable=0;"/>
    <meta name="apple-touch-fullscreen" content="YES" />
    <link rel="apple-touch-icon" href="/iui/iui-logo-touch-icon.png" />
    <style type="text/css" media="screen">@import "/iui/iui.css";</style>
    <script type="application/x-javascript" src="/iui/iui.js"></script>
    <title>Let's do it offline</title>
</head>
<body>
    <div class="toolbar">
        <h1 id="pageTitle">Going offline</h1>
        <a id="backButton" class="button" href="#"></a>
    </div>
    <ul id="menu" title="Sports" selected="true">
        <li><a href="#gym"><img height="80" width="80" 
src="/images/gym.jpg" align="middle"/>
            <span style="display:inline-block;
 vertical-align:middle">Gymnastics</span></a></li>
        <li><a href="#soccer"><img src="/images/soccer.jpg" 
align="middle"/>
        <span style="display:inline-block; 
vertical-align:middle">Soccer</span></a></li>
    </ul>
    <div id="gym" title="Gymnastics" class="panel">
        <img src="/images/gymnastics.jpg" alt="Boys Gymnastics"/>
    </div> 
    <div id="soccer" title="Soccer" class="panel">
        <img src="/images/soccer.png" alt="Boys Soccer"/>
    </div>
</body>
</html>

이 HTML에서 가장 중요한 특징은 루트 html 요소이다. 이 요소에는 manifest 속성이 있다. 이 웹 페이지가 오프라인에서 작동할 수 있다는 사실이 바로 이 속성을 통해 브라우저에 전달된다. manifest 매개변수의 값은 웹 페이지의 캐시 매니페스트 파일을 가리키는 URL이다. 또한, 여기에서는 이 URL이 특정 웹 페이지를 가리키는 상대 URL이지만 전체 URL이 될 수도 있다. 여기에서 주목해야 할 또 다른 사항은 이 페이지의 DOCTYPE이다. DOCTYPE은 HTML 5 웹 페이지의 표준 문서 형식이다. 오프라인 웹 애플리케이션 스펙에는 이러한 DOCTYPE을 사용하라는 내용이 없지만 이 DOCTYPE을 사용할 것을 권장한다. 이 DOCTYPE를 사용하지 않으면 일부 브라우저에서는 웹 페이지를 HTML 5 페이지로 인식하지 못하여 캐시 매니페스트 파일을 무시할 수 있다. 나머지 HTML은 iUI의 사용과 관련된 간단한 예에 불과하다. 그림 1에는 이 페이지가 iPhone 시뮬레이터에서 실행 중인 화면이 표시되어 있다.

오프라인 애플리케이션을 테스트하는 과정은 약간 까다롭다. 할수만 있다면 오프라인 애플리케이션을 테스트하는 가장 간단한 방법은 애플리케이션을 웹 서버에 전개하는 것이다. 그런 다음, 페이지에 한 번 액세스한 후, 오프라인 상태로 변경하여 다시 페이지에 액세스한다. 오류가 발생하는 경우에는 캐시 매니페스트 파일에서 일부 파일을 제거했을 수도 있다. 이러한 과정을 수행하기 전에 웹 서버에서 한 가지 중요한 사항을 구성해야 한다.

위로

웹 서버 구성

Listing 3에서는 웹 페이지의 루트 html 요소에서 manifest 속성을 사용하여 캐시 매니페스트 파일의 위치를 표시했다. 그러나 캐시 매니페스트 파일 스펙에는 캐시 매니페스트 파일을 다운로드하여 처리할 때 브라우저에서 추가로 유효성을 확인해야 한다고 되어 있다. 브라우저는 캐시 매니페스트 파일의 MIME 유형을 확인해야 하며 MIME 유형은 text/cache-manifest가 되어야 한다. 따라서 정적 파일에 이러한 MIME 유형이 설정되도록 웹 서버를 구성하거나 파일을 동적으로 생성하여 MIME 유형을 설정하도록 코드를 일부 작성해야 한다. 전자가 분명히 더 효율적이지만 서버(공유 환경이나 호스트 환경에 있는 서버)의 구성을 제어할 수 없는 경우에는 후자를 선택해야 할 수도 있다. 서버를 제어할 수 있고 Java™ 애플리케이션 서버를 사용하고 있는 경우에는 웹 애플리케이션의 web.xml 파일에서 MIME 유형을 구성할 수 있다. Listing 4에는 이와 관련된 예제가 있다.

<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<!-- Servlets go here -->
    <mime-mapping>
        <extension>mf</extension>
        <mime-type>text/cache-manifest</mime-type>
    </mime-mapping>    
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
</web-app>

여기에서 중요한 부분은 분명히 mime-mapping 요소이다. 이 경우에는 .mf 확장자로 끝나는 모든 파일의 MIME 유형이 text/cache-manifest가 된다. 물론, Apache 웹 서버와 같이 전적으로 정적 컨텐츠만을 제공하는 서버에서 이러한 파일을 제공하는 것이 훨씬 더 효과적이다. 일반적인 Apache 설치판에서는 Listing 5에 표시된 바와 같이 httpd/conf 디렉토리에 있는 mime.types 파일을 수정해야 한다.

# This file controls what Internet media types are sent to the client for
# given file extension(s).  Sending the correct media type to the client
# is important so they know how to handle the content of the file.
# Extra types can either be added here or by using an AddType directive
# in your config files. For more information about Internet media types,
# please read RFC 2045, 2046, 2047, 2048, and 2077.  The Internet media type
# registry is at <http://www.iana.org/assignments/media-types/>.

# MIME type                     Extensions
text/cache-manifest             mf
# many more mappings...

매니페스트 파일이 manifest.mf이므로 두 가지 예제에서는 모두 매니페스트 파일의 확장자로 mf를 사용한다. 매니페스트 파일의 확장자는 임의로 지정할 수 있다. 매니페스트 파일의 확장자가 구성 파일에서 맵핑에 사용된 확장자와 일치하기만 하면 .manifest나 .foo 등으로 지정할 수 있다. 애플리케이션과 웹 서버마다 구성 메커니즘은 다양하다. 이제까지 HTML 5를 사용하여 오프라인 모바일 웹 애플리케이션을 작성하는 방법에 관한 필수사항을 살펴보았으므로, 이제 오프라인 웹 애플리케이션의 기능을 자세히 살펴볼 수 있는 좀 더 복잡한 예제를 확인해 보도록 하자.

위로

고급 예제

이전 예제에서는 모든 컨텐츠가 정적이었다. 오프라인 모드에서 모든 자원을 볼 수 있으면 그것이 최상이다. 보다 일반적인 애플리케이션은 서버와 웹 서비스에서 동적 데이터를 읽을 수 있어야 한다. 예제를 더 현실성 있게 하기 위해 Twitter에서 데이터를 일부 가져온다. 이 시리즈의 이전 기사를 읽은 적이 있으면 이 과정에 익숙할 것이다(참고자료 확인). 시작하기 전에 먼저 Listing 6에서 이 예제의 수정된 HTML을 살펴보자.

<body onload="init()">
    <div class="toolbar">
        <h1 id="pageTitle">Going offline</h1>
        <a id="backButton" class="button" href="#"></a>
    </div>
    <ul id="menu" title="Sports" selected="true">
        <li><a href="#gym">
            <img height="80" width="80" src="/images/gym.jpg" align="middle"/>
            <span style="display:inline-block; vertical-align:middle">Gymnastics</span>
        </a></li>
        <li><a href="#soccer"><img src="/images/soccer.jpg" align="middle"/>
            <span style="display:inline-block; vertical-align:middle">Soccer</span>
        </a></li>
        <li id="online" style="display: none"><img src="/images/online.jpg"/></li>
    </ul>
    <ul id="gym" title="Gymnastics"></ul> 
    <ul id="soccer" title="Soccer"></ul>
</body>

주요 차이점은 이제는 gym과 soccer 요소가 비어 있는 채로 표시되어 있다는 점이다. Twitter에서 체조(gymnastics) 및 축구(soccer)와 관련된 트윗을 가져와서 각 요소에 채운다. 또한, 사용자에게 애플리케이션의 인터넷 연결 상태(온라인 또는 오프라인)를 나타내는 데 사용되는 이미지를 표시하는 list 항목 요소(id가 online인 항목)에 주목하자. 그러나 이 요소는 기본적으로 숨겨지며 기본 모드는 오프라인이다. body 요소는 본문을 로드할 때 호출될 init 함수를 지정한다. Listing 7에는 이 함수가 표시되어 있다.

function init(){
    if (navigator.onLine){
        searchTwitter("gymnastics", "showGymTweets");
        searchTwitter("soccer", "showSoccerTweets");
        $("online").style.display = "inline";
    } 
    gymTweets = localStorage.getItem("gymnastics");
    if (gymTweets){
        gymTweets = JSON.parse(gymTweets);
        showGymTweets();
    }
    soccerTweets = localStorage.getItem("soccer");
    if (soccerTweets){
        soccerTweets = JSON.parse(soccerTweets);
        showSoccerTweets();
    }
    document.body.addEventListener("online", function() {
            $("online").style.display= "inline";
            applicationCache.update();
            applicationCache.addEventListener("updateready", function() {
                applicationCache.swapCache();
            }, false);
        }, false);
    document.body.addEventListener("offline", function() {
        $("online").style.display = "none";
    }, false);        
}

이 코드에서는 먼저 인터넷 연결 상태(온라인 또는 오프라인)를 확인한다. 그런 다음, 온라인 상태에 있으면 온라인 이미지를 표시한다. 보다 중요한 점은 온라인 상태에 있으면 searchTwitter 함수를 호출하여 Twitter에서 데이터를 로드한다는 점이다. 이러한 기능은 이 시리즈의 이전 기사(참고자료 확인)에서 설명한 바 있으며 이 기술을 이용하면 JSONP를 사용하여 사용자가 브라우저에서 직접 Twitter를 검색할 수 있게 할 수 있다. 그 다음에는 localStorage에서 기존 트윗을 로드한다. localStorage에 익숙하면 이 기능이 또 다른 HTML 5의 기능으로 오프라인 모드에서 매우 잘 동작한다는 점을 알 수 있을 것이다. 이 기능에 관한 자세한 사항은 이 시리즈의 Part 2를 확인하도록 한다(참고자료 확인). 새로 검색하거나(사용자가 온라인 상태에 있다는 것을 발견하는 경우에 시작) 로컬에 저장된 트윗을 로드하는 두 경우 모두에서 showGymTweets와 showSoccerTweets 함수가 호출된다. 이 두 함수는 서로 비슷하며 Listing 8에는 showGymTweets 함수가 표시되어 있다.

function showGymTweets(response){
    var gymList = $("gym");
    gymList.innerHTML = "";
    if (gymTweets){
        if (response){
            gymTweets = response.results.reverse().concat(gymTweets);
        }
    } else {
        gymTweets = response.results.reverse();
    }
    showTweets(gymTweets, gymList);
    localStorage.setItem("gymnastics", JSON.stringify(gymTweets));
}

이 함수는 로컬에 저장된 트윗이나 Twitter에서 가져온 새 트윗 또는 두 가지 트윗(있는 경우)을 모두 표시할 수 있다. 가장 중요한 점은 이 함수가 모든 것을 로컬에 저장하여 트윗으로 구성된 로컬 데이터 캐시를 구축한다는 점이다. 이 함수는 모두 로컬에 캐시된 데이터와 서버에서 가져온 새로운 데이터를 모두 관리하는 데 필요한 일반적인 코드로 되어 있다. 이 함수를 이용하면 인터넷 연결 상태(온라인 또는 오프라인)와 무관하게 애플리케이션이 원활하게 작동하도록 할 수 있다.

Listing 7에서는 마지막으로 이벤트 핸들러를 등록한다. 온라인과 오프라인 이벤트를 등록한다. 이 이벤트는 브라우저의 인터넷 연결 상태(온라인 또는 오프라인)가 변경되는 시점을 사용자에게 알려준다. 최소한 온라인 이미지를 변경할 수 있으며 또한, 이 이미지를 표시할지 여부를 전환할 수도 있다. 애플리케이션이 오프라인 상태에 있다가 온라인 상태가 되면 applicationCache 오브젝트에 액세스할 수 있다. 이 오브젝트는 캐시 매니페스트 파일에서 선언된 바와 같이 캐시된 모든 자원을 표시한다. 이 경우에는 update 메소드를 호출한다. 이 메소드는 applicationCache가 업데이트되었는지 확인하도록 브라우저에 지시한다. 앞서 언급한 바와 같이 브라우저는 먼저 캐시 매니페스트 파일이 업데이트되었는지 확인한다. 여기서는 또 다른 이벤트 리스너를 추가하여 캐시를 업데이트할 수 있는지 확인한다. 캐시를 업데이트할 수 있으면 applicationCache에서 swapCache 메소드를 호출한다. 이렇게 하면 캐시 매니페스트 파일에서 지정한 모든 파일이 다시 로드된다.

이 고급 예제에서는 캐시 매니페스트 파일과 관련하여 한 가지를 마무리해야 한다. Listing 9와 같이 캐시 매니페스트 파일을 수정해야 한다.

CACHE MANIFEST
# Version 0.2
CACHE:
offline.html
json2.js
/iui/iui.js
/iui/iui.css
/iui/loading.gif
/iui/backButton.png
/iui/blueButton.png
/iui/cancel.png
/iui/grayButton.png
/iui/listArrow.png
/iui/listArrowSel.png
/iui/listGroup.png
/iui/pinstripes.png
/iui/redButton.png
/iui/selection.png
/iui/thumb.png
/iui/toggle.png
/iui/toggleOn.png
/iui/toolbar.png
/iui/whiteButton.png
/images/gym.jpg
/images/soccer.jpg
/images/online.jpg

NETWORK:
http://search.twitter.com/

이 예제에서는 캐시 매니페스트 파일에 명시적으로 CACHE 섹션을 추가했다. 매니페스트 파일에는 다양한 섹션이 있을 수 있다. 그러나 섹션이 하나만 있는 경우에는 그 섹션은 CACHE 섹션으로 간주되며 생략할 수도 있다. 여기에서 명시적으로 추가한 이유는 NETWORK 섹션이 있기 때문이다. 이 섹션은 지정된 도메인(이 경우에는 search.twitter.com)에 속해있는 자원은 네트워크에서 페치되어야 하며 결코 캐시되어서는 안 된다는 점을 나타낸다. 여기서는 Twitter에서 검색한 결과를 로컬에 캐시하고 있기 때문에 더 이상 브라우저에서 간접적으로 쿼리를 캐시할 필요가 없다. 이러한 기능이 제대로 작동하면 애플리케이션은 언제나 Twitter에서 새로운 트윗을 로드하게 되지만 또한, 이러한 트윗을 저장하여 사용자의 장치가 오프라인 상태가 되는 경우에도 사용자가 이 트윗을 이용할 수 있도록 한다.

위로

요약

Mosaic가 개발된 이후 웹 애플리케이션은 크게 발전하였다. 모바일 웹 애플리케이션은 훨씬 더 진보했다. WML(Wireless Markup Language)만 사용하는 WAP 폰의 시대는 거의 사라졌다. 이제는 개발자들이 데스크탑 브라우저에 대해서조차 질문하지 않는 사항을 모바일 브라우저에 대해서는 질문을 한다. 오프라인 기능은 이러한 기능 중 하나라고 할 수 있다. HTML 5에 지정된 표준은 크게 발전하였으며 이제는 개발자들이 모바일 웹 애플리케이션을 오프라인에서 사용할 수 있게 하는 과정이 단순해졌다. 이 시리즈의 다음 기사에서는 또 다른 HTML 5 표준인 Web Brokers를 사용하여 모바일 웹 애플리케이션의 성능을 대폭 개선하는 방법을 살펴볼 예정이다.

위로

다운로드 하십시오

다운로드 방식에 대한 정보

참고자료

교육

• HTML 5를 사용하여 모바일 웹 애플리케이션 작성하기, Part 2: HTML 5를 사용하여 모바일 웹 애플리케이션용 로컬 스토리지 잠금 해제하기(Michael Galpin, developerWorks, 2010년 5월): 이 기사에서는 무선 애플리케이션에 중요한 HTML 5의 새로운 기능을 탐구한다. 표준화된 로컬 스토리지와 간단한 API를 사용하여 클라이언트에 대용량 데이터를 저장함으로써 성능을 개선한다.
  
  
• HTML 5를 사용하여 모바일 웹 애플리케이션 작성하기, Part 1: HTML 5, geolocation API 및 웹 서비스를 결합하여 모바일 매시업 작성하기(Michael Galpin, developerWorks, May 2010): 이 기사에서는 다양한 웹 서비스에서 사용할 위치 좌표를 찾고 추적한다. 이 시리즈의 Part 1에서는 HTML 5에 있는 위치 정보 표준의 다양한 특성과 인기있는 웹 서비스를 사용하여 흥미로운 모바일 매시업을 작성한다.
  
  
• HTML 5 Offline Application Cache 문서: 매니페스트 파일과 애플리케이션 캐시에 관해 Apple에서 제공하는 자세한 정보를 살펴볼 수 있다.
  
  
• Offline resources in Firefox: 오프라인은 모바일에만 국한된 것은 아니다. 모질라에서 Firefox를 통해 이러한 표준을 어떻게 구현하는지 살펴보자.
  
  
• Create Ajax applications for the mobile Web(Michael Galpin, developerWorks, 2010년 3월): 모든 모바일 웹 애플리케이션의 핵심인 Ajax를 사용하는 방법을 탐구한다.
  
  
• New elements in HTML 5(Elliotte Rusty Harold, developerWorks, 2007년 8월): HTML 5가 Javascript에만 관련된 것은 아니다. HTML 5의 새로운 마크업을 일부 확인해 보자.
  
  
• Android and iPhone browser wars, Part 1: WebKit to the rescue(Frank Ableson, developerWorks, 2009년 12월): HTML 5를 사용하는 모바일 웹 애플리케이션 개발 방식을 선호하지만 여전히 iPhone 앱 스토어와 Android 마켓에서 애플리케이션이 판매되기를 원하는가? 두 개의 기사로 구성된 이 시리즈의 Part 1에서는 이러한 두 가지 시장에서 살아남는 방법을 확인할 수 있다.
  
  
• Dive Into HTML 5: HTML 5의 다양한 기능과 HTML 5의 감지 기능을 자세히 살펴보려면 무료로 얻을 수 있는 이 책을 확인하도록 한다.
  
  
• Safari Reference Library: iPhone용 웹 애플리케이션을 개발한다면 이 참고자료를 계속 살펴보도록 하자.
  
  
• W3C HTML 5 Specification(Working Draft, 2010년 3월): HTML 5의 정의와 관련된 내용을 확인할 수 있다.
  
  
• Michael Galpin이 작성한 다양한 기사(Michael Galpin, developerWorks, 2006년 4월 현재):XML, Eclipse, Apache Geronimo, Ajax 및 다양한 Google API 등과 같은 기술에 관한 기사를 읽어보자.
  
  
• My developerWorks: developerWorks와 관련된 경험을 개인화할 수 있다.
  
  
• IBM XML 인증: XML 및 관련 기술에 대한 IBM 인증 개발자가 되는 방법을 찾아볼 수 있다.
  
  
• XML 기술 자료: developerWorks XML 영역에서 다양한 기술 관련 기사와 팁, 튜토리얼, 표준 및 IBM Redbook을 볼 수 있다.
  
  
• developerWorks 기술 행사 및 웹 캐스트: 이들 세션에 참가하여 최신 기술에 대한 정보를 얻을 수 있다.
  
  
• Twitter의 developerWorks 페이지: 오늘 가입하여 developerWorks 트윗을 팔로우하자.
  
  
• developerWorks 팟캐스트: 소프트웨어 개발자의 흥미로운 인터뷰와 토론을 확인할 수 있다.
  
  

제품 및 기술 얻기

• Modernizr 프로젝트: localStorage, Web Workers, applicationCache 등과 같은 HTML 5 기능을 감지할 수 있는 포괄적인 유틸리티를 얻을 수 있다.
  
  
• Android 개발자 웹 사이트: Android SDK을 다운로드하고 API 참조에 액세스할 수 있으며 Android에 관한 최신 뉴스를 확인할 수 있다.
  
  
• iPhone SDK: iPad, iPhone 및 iPod touch 애플리케이션을 개발하는 데 필요한 최신 iPhone SDK를 얻을 수 있다.
  
  
• Android 오픈 소스 프로젝트: Android 모바일 플랫폼의 오픈 소스 코드를 얻을 수 있다.
  
  
• Google App Engine SDK: Google을 사용하여 확장 가능한 웹 애플리케이션을 빌드하는 데 필요한 Java와 Python 도구를 다운로드할 수 있다.
  
  
• IBM 제품 평가판: IBM SQA Sandbox의 온라인 시험판을 다운로드하거나 살펴보고 DB2®, Lotus®, Rational®, Tivoli® 및 WebSphere®의 애플리케이션 개발 도구와 미들웨어 제품을 사용해 볼 수 있다.
  
  

토론

• 포럼에 참여하기.
  
  
• XML 영역 토론 포럼: 다양한 XML 관련 토론에 참여할 수 있다.
  
  
• developerWorks 포럼 & 블로그를 통해 developerWorks 커뮤니티에 참여하자.
  
  

필자소개

아티클 순위

의견

위로

목차

• 이 시리즈의 정보
• 전제 조건
• 애플리케이션을 오프라인에서도 작동할 수 있게 해야 하는 이유
• 오프라인 매니페스트 파일
• 브라우저에 매니페스트 파일 정보 전달
• 웹 서버 구성
• 고급 예제
• 요약
• 다운로드 하십시오
• 참고자료
• 필자소개
• 의견