반응형
기사 원문으로 가시면 자세한 설명과 소스코드 자료를 볼수 있습니다
요약： 모바일 애플리케이션의 장점은 사용자가 이동하는 곳이면 어디에서나 애플리케이션과 애플리케이션 데이터를 사용할 수 있다는 점입니다. 그러나 실제로는 모바일 장치를 인터넷에 연결할 수 없는 경우가 있습니다. 모바일 웹 애플리케이션에서는 이러한 문제점을 피할 수 없을 것처럼 보입니다. 그러나 웹 애플리케이션은 진화되어 이제는 오프라인에서도 작동할 수 있게 되었습니다. 이 기사에서는 모바일 웹 애플리케이션을 오프라인에서 사용할 수 있게 하는 방법과 애플리케이션의 상태가 오프라인에서 온라인으로 또는 그 반대로 변경되는 시점을 발견하는 방법을 살펴봅니다.
애플리케이션을 오프라인에서도 작동할 수 있게 해야 하는 이유
여러 가지 이유로 오프라인 웹 애플리케이션은 사용자와 개발자 모두에게 매력적이다. 대다수의 개발자들은 각 플랫폼에 적합한 특정 애플리케이션을 작성하기보다는 인기있는 모든 스마트폰에서 작동하는 하나의 웹 애플리케이션을 작성할 수 있기를 원한다. 단지, 개발자들에게 편리하다고 해서 그것이 사용자가 원하는 것이라고 볼 수는 없다. 이러한 이유로 모바일 웹 애플리케이션은 특정 모바일 웹 애플리케이션이 제공할 수 있는 기능과 동일한 기능을 대부분 제공할 수 있어야 한다. 오프라인에서 작동하는 것도 이러한 기능에 해당한다고 할 수 있다. 애플리케이션 유형(모바일 또는 데스크탑)에 관계없이 일부 애플리케이션은 데이터와 서비스를 대부분 인터넷을 통해 이용한다. 이러한 애플리케이션에서는 사용자가 인터넷에 연결된 상태가 좋지 않으면 기능이 저하될 수 있다. 그러나 단지 인터넷 연결 상태가 좋지 않다고 해서 애플리케이션의 작동이 완전히 중단되어서는 안 된다. 기존의 웹 애플리케이션에서는 이러한 상황이 필연적으로 발생하게 된다.
오프라인 기능을 이용하면 모바일 웹 애플리케이션을 데스크탑 애플리케이션과 유사하게 작동하게 할 수 있다. 또한, 몇 가지 다른 혜택도 얻을 수 있다. 웹 브라우저는 언제나 정적 자원을 캐시한다. 또한, 웹 서버에서 전송한 HTTP 응답 헤더의 메타데이터에 의존하여 페이지를 렌더링하는 데 필요한 이미지와 HTML, Javascript, CSS를 검색한다. 페이지를 렌더링하는 데 필요한 모든 자원이 캐시되면 페이지가 매우 빠르게 로드된다. 그러나 일부 자원이 캐시되지 않으면 이로 인해 모든 기능이 극도로 저하될 수 있다. 이러한 상황은 생각보다 자주 발생한다. 다른 모든 파일보다도 하나의 CSS 파일에 다양한 캐시 제어 헤더가 있었을 수 있으며 그렇지 않으면 할당된 공간 밖에서 브라우저가 실행 중이었기 때문에 캐시가 제거되었을 수도 있다.
오프라인 애플리케이션에서는 모든 자원이 캐시된다. 캐시에서 제공되지 말아야 하는 자원을 사용자가 제어할 수 있기는 하지만 브라우저는 언제나 캐시에서 모든 자원을 로드한다. 특별한 시간소인 매개변수를 Ajax GET 요청에 추가하여 브라우저에서 응답을 캐시하지 않게 하는 것이 일반적인 Ajax 핵이며 그렇지 않고 GET이 적합한 경우에 POST를 사용하면 상태가 훨씬 더 나빠진다. 오프라인이 지원되는 웹 애플리케이션에서는 이러한 핵이 필요 없다.
오프라인 애플리케이션은 기능이 우수하므로 작성하기가 복잡할 것 같다. 과연 그럴까? 실제로는 매우 단순하다. 다음과 같은 세 가지 작업을 수행하면 된다.
온라인 매니페스트 파일 작성
브라우저에 매니페스트 파일 정보 전달
서버에서 MIME 유형 설정
오프라인 매니페스트 파일
오프라인 매니페스트 파일
Listing 1. 간단한 캐시 매니페스트 파일
Listing 2. 웹 애플리케이션의 디렉토리 구조(텍스트 버전)
브라우저에 매니페스트 파일 정보 전달
Listing 3. 오프라인에서 사용 가능한 웹 페이지
그림 1. iPhone 시뮬레이터에서 실행 중인 오프라인 웹 애플리케이션
웹 서버 구성
Listing 4. web.xml을 구성하여 MIME 유형 설정하기
Listing 5. mime.types에서 MIME 유형 설정
고급 예제
Listing 6. 수정된 HTML
Listing 7. 페이지 초기화 Javascript
Listing 8. Gym 트윗 표시
Listing 9. 수정된 캐시 매니페스트 파일
요약
Mosaic가 개발된 이후 웹 애플리케이션은 크게 발전하였다. 모바일 웹 애플리케이션은 훨씬 더 진보했다. WML(Wireless Markup Language)만 사용하는 WAP 폰의 시대는 거의 사라졌다. 이제는 개발자들이 데스크탑 브라우저에 대해서조차 질문하지 않는 사항을 모바일 브라우저에 대해서는 질문을 한다. 오프라인 기능은 이러한 기능 중 하나라고 할 수 있다. HTML 5에 지정된 표준은 크게 발전하였으며 이제는 개발자들이 모바일 웹 애플리케이션을 오프라인에서 사용할 수 있게 하는 과정이 단순해졌다. 이 시리즈의 다음 기사에서는 또 다른 HTML 5 표준인 Web Brokers를 사용하여 모바일 웹 애플리케이션의 성능을 대폭 개선하는 방법을 살펴볼 예정이다.
반응형
