반응형

네이티브앱을 만들기만 하던 시대를 지나 이젠 웹으로 앱을 만드는게 보편화 되어버린 시대로 도달했다.

하이브리드앱은 이미 많은 검증을 거쳤고, 상용화되서 시장을 점유하고 있는것이 사실이다.

대표적인 앱제작플롯폼으로 "폰갭(http://phonegap.com/)"을 들 수 있다.

폰갭,앱스프레소, 티타늄들 많이 있지만, 폰갭이 가장 간단하고 사용하기 좋은거 같다. 


자바스크립트를 이용한 처리가 작년만 해도 느렸지만, 하드웨어 성능도 향상되고, 자바스크립트 엔진 성능도 향상되어 지금은 네이티브 API를 사용하는것을 거의 따라잡았다고 볼 수 있다.

오프라인에서는 HTML5 캐시 또는 Web Storage 기능등이 있기때문에 온라인이 아니더라도 일반적인 정보를 보여줄 수 있게되었다. (Web Storage, Web SQL DB, IndexedDB ) 캐시 기능은 문제가 캐시가 잘 변경이 되지 않는다는 단점이 있긴 하지만. 오프라인에서도 화면을 잘 보여준다. 서버 셋팅만 잘 해두었다면 말이다.


HTML5 application Cache

What is Application Cache?

HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.

Application cache gives an application three advantages:

  1. Offline browsing - users can use the application when they're offline
  2. Speed - cached resources load faster
  3. Reduced server load - the browser will only download updated/changed resources from the server

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

Application cache is supported in all major browsers, except Internet Explorer.


* 일단 서버에서 manifest 타입이 웹에서 활성화 되어야 한다.

   contentType = "text/cache-manifest" 이 적용되어야 한다.

   (contentType만 맞추면 jsp 파일로 구현가능하다. )


1. manifest 파일에 애플리케이션 캐시정책이 기록되어 있다.

    - 어떤 파일을 캐시할지, 오프라인에서 어떤 파일을 보여줄 것인지 등등

2. 처음 화면 접속시 manifest 파일의 내용을 캐시를 해둔다. 

3.두번째 부터는 manifest 파일이 갱신되지 않았으면 캐시를 불러온다.

4.갱신이 되어있어도 일단 캐시를 불러오고, 백그라운드로 업데이트를 한다.

   그래서, 갱신해도 처음에는 이전 캐시를 보여주고 새로고침을 한번 더하거나 하면 갱신된 내용을 보여준다.


웹이 발전하는것은 결국 사용자 편의성을 위한 것이지, 어떤 특정한 기술로 인해 편의성을 져버린다면 그 서비스는 퇴화될것이다 .







반응형
반응형

인터넷에 연결 되어 있지 않더라도 웹 어플리케이션을 실행 할 수 있도록

HTML5 에서는 어플리케이션 캐시를 지원한다.

 

두 부분으로 나누어 생각 해 볼 수 있다.

1. manifest file
2. JavaScript

매니페스트 파일은 캐시될 자원들, 즉 HTML, JavaScript, CSS, Image 등을 기술하는 파일이고
자바스크립트는 캐시된 파일을 업데이트하기 위해 사용한다.


* Application Cache 지원여부 확인

if (window.applicationCache) {
console.log("지원함");
} else {
console.log("지원안함");
}

    Application Cache 상태

    Window.applicationCache.status 를 확인하면 현재 캐쉬의 상태를 알 수 있다. 다음과 같이 6개의 상태값을 가질 수 있다. 각 상태값은 applicationCache 에 대문자로 된 상수로 선언되어 있다.

    if ( window.applicationCache.status == window.applicationCache.UPDATEREADY) { // 작업진행 }

  • 0 – UNCACHED
    페이지가 캐쉬를 사용하지 않거나, 맨 처음 접속시에 캐쉬가 다운로드 되기 전까지는 UNCACHED 상태이다.
  • 1 – IDLE
    브라우저가 최신버전의 Application Cache 로 업데이트되었고, 더 이상 다운로드 할 업데이트 버전이 없는 상태
  • 2 – CHECKING
    Manifest 파일이 업데이트 되었는지를 체크하는 상태 ( 현재 캐쉬된 Manifest 파일과 서버의 Manifest 파일을 바이트단위로 비교한다 )
  • 3 – DOWNLOADING
    캐쉬할 파일들을 다운로드 하는 상태 ( 2번 단계에서 Manifest 파일이 업데이트되었다고 알게 되었을 때 )
  • 4 – UPDATEREADY
    새로운 캐쉬의 다운로드가 끝나고 사용할 준비가 되었을 때 ( 아직 이 캐쉬가 사용된건 아님 )
  • 5 – OBSOLETE
    Manifest 파일 자체를 찾을 수 없을 때, 상태는 OBSOLETE로 지정되며 캐쉬는 삭제된다.


처음으로 웹 페이지가 로드 된 후에는 매니페스트 파일에 지정된 자원들은
웹 서버에서 가져오는 것이 아니라 어플리케이션 캐시에서 가져온다.

1. 매니페스트 파일

1.1. CACHE MANIFEST 로 시작한다.
1.2. 캐시 할 URL 들
1.3. 주석은 # 로 시작하고 한 줄만 허용한다.
1.4. 온라인 될 때 접근 해야 할 웹주소는 NETWORK: 으로 표시한다.
1.5. NETWORK: 줄 다음에 부가적으로 캐시 할 파일은 CACHE: 로 지정한다.
1.6. 선택사항으로 FALLBACK: 을 지원하는데 첫번째 항목에서 자원을 찾지 못하는 경우
두 번쨰 항목을 지정할 수 있다.

매니페스트 파일을 선언하는 HTML 파일은 자동적으로 어플리케이션 캐시에 저장된다.
따라서 그 파일을 매니페스트 파일에 넣을 필요가 없다.

HTML 파일에 매니페스트 파일을 선언하기 위해서는 다음과 같이 한다.

<html manifest="myapp.manifest">

만일 매니페스트 파일이 변경되면 자동적으로 어플리케이션 캐시가 업데이트 된다.
웹 서버에 있는 자원이 변경되거나 매니페스트 파일의 날짜가 바뀐다고 해도 자동적으로
업데이트 되지 않는다. 반드시 매니페스트 파일의 내용이 바뀌어야 한다.
주석만 바뀌어도 된다.

어플리케이션 캐시는 DOMWindow 의 속성으로 다음과 같이 얻어 낼수 있다.

cache = window.applicationCache;

수동적으로 업데이트 할려면 다음과 같이 하면 된다.

if(window.applicationCache.status = window.applicationCache.UPDATEREADY)
{
window.applicationCache.update();
window.applicationCache.swapCache();
}

아직 자바스트립트를 사용하여 어플리케이션 캐시에 자원을 더하거나 뺄 수는 없다.

어플리케이션 캐시 이벤트를 처리하기 위해서는 다음과 같이 한다.

cache = window.applicationCache;
cache.addEventListener('updateready', cacheUpdatereadyListener, false);
cache.addEventListener('error', cacheErrorListener, false);


반응형
반응형

http://www.html5rocks.com/en/search?q=cache+manifest

manifest 파일은 어플리케이션 캐시에 다운로드 되고 저장되어 질 HTML, JavaScript, CSS, 이미지 파일들과 같은 리소스들을 기술한다. 웹 페이지가 첫 번째로 로딩이 된 후 부터 , manifest 파일에 기술되어진 리소스 파일들은 웹 서버가 아닌 application cache에서 획득되어 진다.

manifest 파일은 다음과 같은 속성들을 가지고 있다:

  • MIME-Type이 text/cache-manifest와 같이 제공되어야 한다.
  • 첫 번째 줄에는 CACHE MANIFEST라는 텍스트를 포함하고 있어야 한다.
  • 그 다음 줄들은 캐시할 각각의 리소스의 URL이나 주석을 포함하고 있다.
  • 주석문들은 # 문자로 시작하고 한 줄로 와야한다.
  • URL들은 로컬에 캐시로 다운로드를 원하는 리소스에 대한 파일 경로이다. 파일 경로는 manifest 파일에 대한 상대,절대경로로 표현되어야 한다 —CSS에서 사용되는 파일 경로와 유사
  • manifest 는 반드시 온라인일 시에 접근해야 하는 모든 외부 리소스들에 상응하는 접두어를 포함하고 있는 whitelist를 선언하야 한다. 이 whitelist는 그 자신이 한 줄을 구성하는 NETWORK:라는 식별자와 함께 시작한다.
    또한 network 엔트리 뒤에 그 자신이 한 줄을 구성하는 CACHE:라는 식별자를 삽입함으로써 추가적인 cache 엔트리를 선언할 수 있다.

    만 약 원한다면 manifest는 fallback 섹션들을 둘 수 있다. 이 섹션들은 FALLBACK: 이라는 식별자와 시작할 수 있고, 두 개의 URI들을 포함하고 있는 연속되는 타이들을 포함하고 있다. 두 번째 URI는 브라우져가 첫 번째 URI에 접근하지 못할 때 사용한다. URI들은 반드시 둘 다 manifest 그 자신과 같은 origin을 가지고 있어야 한다. 두 개의 URI 모두 부분적인 경로(partial URIs)만 포함한다.(prefixes);
    예를 들어 아래 예제는 만약 /files/projects 가 찾아지지 않는다면, 클라이언트는 다시 /files/projects/를 /projects로 대체해서 찾는다

FALLBACK:

/files/projects /projects

  • "Manifest 파일 선언하기"에 설명 되어진 대로, manifest파일을 선언한 HTML 파일은 자동적으로 application cache에 포함되게 된다. 당신은 그것을 manifest 파일에 추가할 필요가 없다.
반응형

'프로그래밍 > Web' 카테고리의 다른 글

자바스크립트 차트  (0) 2012.03.05
Comet 이란  (0) 2012.03.02
REST , RESTful  (0) 2011.12.09
[크롬] 모바일 사이즈로 확인해보기  (0) 2011.12.07
크롬에서 json데이터 볼때 설치하시오~ 어디? 크롬에다가~  (0) 2011.11.30

+ Recent posts