MozillaHacks-웹기술블로그

오프라인 웹 애플리케이션 만들기

작성자: H2KFL

작성일: 2010/07/01 분류: Firefox, 데모, 모바일, and 오프라인 기능

원글: offline web applications, 2010년 1월 7일, Paul Rouget

네트웍은 자바스크립트, CSS 그리고 HTML 소스 파일들과 (이미지나 비디오와 같은)리소스들을 내려받거나 (XMLHttpRequest와 <forms>을 사용하여) 웹 서비스를 다채롭게 하는데 사용되는 것을 떠나 어떠한 웹 어플리케이션에게나 핵심 요소다.

웹 어플리케이션들의 오프라인 지원은 사용자에게 정말 유용할 것이다. 예를 들면, 네트웍에 연결되어 있지 않을 때에도 사용자들이 자신의 수신함(inbox)에 있는 메일들을 읽고 새로운 메일을 작성하도록 해주는 웹메일 어플리케이션을 상상해봐라.

오프라인 웹 어플리케이션들을 지원하는 방법은 페이지를 다시 읽어들이거나 복원할 때와 사용자의 세션(session)들 사이에 데이터를 캐시에 저장하거나 영속적으로 만듦으로써 어플리케이션의 성능을 향상키기는데도 사용될 수 있다.

데모: 할일 목록 관리 (a To Do List Manager)

작동하는 오프라인 웹 애플리케이션을 알기위해 N900의 Firefox상에서 할일 목록 관리가 온라인과 오프라인에서 작동하는 것을 보여주는 Vivien Nicolas의 데모를 보자.

또한 이 어플리케이션의 live demo를 볼 수 있다.

자신만의 오프라인 어플리케이션 만들기

웹 어플리케이션을 오프라인에서 작동하도록 만들기 위하여 세가지의 고려할 것이 있다.

저장소: 영속적인 데이터

DOM storage가 브라우저 세션들간의 데이터를 저장하고 탭들간에 데이터를 공유하거나 페이지를 다시 읽거나 브라우저를 다시 실작할 때 데이터의 분실을 방지하게 해준다.

저장소의 전역 오브젝트에는 2가지 종류가 있다: sessionStorage와 localStorage

  • sessionStorage 페이지 세션이 지속되는 동안 저장소를 관리한다. 페이지가 다시 읽어지거나 복원되어도 브라우저가 열려있는 동안에는 페이지 세션이 지속된다. 새로운 탭이나 윈도에서 페이지를 열면 새로운 세션이 생성된다.
  • localStorage 여러 페이지와 브라우저 세션들에 걸쳐 오랜 시간 데이터를 유지하는 저장소를 관리한다. 사용자가 브라우저를 닫거나 컴퓨터를 끄더라도 사라지지 않는다.

localStorage와 sessionStorage 모두 다음 API를 사용한다:

window.localStorage and window.sessionStorage {
  long length; // 저장된 아이템의 수
  string key(long index); // 인덱스에 해당하는 키의 이름을 반환
  string getItem(string key); // 키에 해당하는 저장된 값을 반환
  void setItem(string key, string data); // 새로운 키와 값을 추가
  void removeItem(string key); // 아이템의 키를 제거
  void clear(); // 저장소를 비움
};

여기에 어떻게 문자열을 저장하고 읽는지를 보여주는 예제가 있다:

// 문자열을 저장
function saveStatusLocally(txt) {
  window.localStorage.setItem("status", txt);
}

// 문자열을 읽기
function readStatus() {
   return window.localStorage.getItem("status");
}

저장소의 속성들은 HTML5의 출처(schema + 호스트의 이름 + 비표준 포트)에 제한된다. 이것은 http://foo.com의 window.localStorage와 http://bar.com의 window.localStorage가 다르다는 것을 의미한다. 예를 들면 http://google.com은 http://yahoo.com의 저장소에 접근할 수 없다.

오프라인인가?

데이터를 저장하기 전에 사용자가 온라인지 아닌지를 알고 싶을 것이다. 예를 들면 값을 로컬에 저장할 것인지 서버로 보낼 것인지 정하는 할 때 매우 유용하다.

사용자의 온라인 영부는 navigator.onLine 속성을 확인한다. 덧붙이자면, window 요소의 online과 offline 이벤트들을 듣는 것으로 연결 변화를 통보받을 수 있다.

여기에 (트위터 같은) 서버로 상태를 전송하는 정말 간한단한 자바스크립트 코드가 있다.

  • 상태를 설정했고 온라인이면, 상태를 전송한다.
  • 상태를 설정했고 오프라인이면, 상태를 저장한다.
  • 온라인이 되고 저장된 상태가 있다면, 저장된 상태를 전송한다.
  • 페이지를 읽고 온라인이며 저장된 상태가 있다면, 저장된 상태를 전송한다.
function whatIsYourCurrentStatus() {
  var status = window.prompt("What is your current status?");
  if (!status) return;
  if (navigator.onLine) {
    sendToServer(status);
  } else {
    saveStatusLocally(status);
  }
}

function sendLocalStatus() {
  var status = readStatus();
  if (status) {
    sendToServer(status);
    window.localStorage.removeItem("status");
  }
}

window.addEventListener("load", function() {
   if (navigator.onLine) {
     sendLocalStatus();
   }
}, true);

window.addEventListener("online", function() {
  sendLocalStatus();
}, true);

window.addEventListener("offline", function() {
  alert("You're now offline. If you update your status, it will be sent when you go back online");
}, true);

오프라인 리소스들: the Cache Manifest

사용자의 브라우저가 필요한 어떤 파일들을 받으려는데 오프라인이라 서버에 닿지 않고 있을 때, 당신은 항상 필요한 파일들이 브라우저의 캐시에 있는지 셀 수는 없다. 예로 사용자가 브라우저의 캐시를 지웠을 수 도 있기 때문이다. 이것이 왜 당신이 어떤 파일들이 저장되어야 하는지를 명시적으로 정의해야 하는 이유이다. 그래서 사용자가 오프라인이 되었을 때 필요한 모든 파일과 리소스들이 사용가능해진다: HTML, CSS, 자바스크립트 파일들, 그리고 이미지와 비디오와 같은 다른 파일들.

manifest 파일은 HTML 내에 기술되며 오프라인에서 어플리케이션에 의해서 사용되는 파일들의 명시적인 목록을 포함하고 있다.

<html manifest="offline.manifest">

여기에 manifest 파일의 내용 예제가 있다:

CACHE MANIFEST
fonts/MarketingScript.ttf
css/main.css
css/fonts.css
img/face.gif
js/main.js
index.xhtml

manifest 파일의 MIME-type은 반드시: text/cache-manifest.

manifest 파일의 포멧과 캐시 동작에 대한 자세한 내용은 이 문서를 참고하라.

정리

당신의 어플리케이션이 오프라인에서 동작하도록 만들 때 반드시 고려해야 할 중요 요소들은 사용자의 입력을 localStorage에 저장하는 것과 캐시 manifest 파일을 작성하는 것, 그리고 연결 변경을 감시하는 것이다.

전체 문서를 보려면 Mozilla Developer Center를 방문하라.

작성자: H2KFL

H2KFL가 작성한 문서들…

댓글이 없습니다.

댓글 쓰기