HTML5 Application Cache (appcache)

HTML5에 추가된 appcache 기능

• 오프라인에서 웹사이트, 앱을 실행시킬 수 있다.
• 퍼포먼스를 효율적으로 향상시킬 수 있다(페이지 로딩 속도 향상)

<사용법>

html 태그에 manifest 속성을 추가해주면, 오프라인 상태에서도 컨텐츠를 볼 수가 있다.

cache된 파일들에 대한 정보는 아래와 같이 확인 할 수 있다 (개발자툴, F12)

CACHE MANIFEST

CACHE:

#images
/images/image1.png
/images/image2.png

#pages
/pages/page1.html
/pages/page2.html

#CSS
/style/style.css

#scripts
/js/script.js

FALLBACK:
/ /offline.html

NETWORK:
signup.html

위와 같이 접속 시 "cache.manifest"에 있는 파일을 읽어 캐쉬에 저장하여, 다음에 접속시 "cache.manifest"만을 받아와서 화면에 뿌려주며, 이 파일을 업데이트 하여 적용할 수 있다.

또한 캐쉬될 파일과 그렇지 않은 파일을 "NETWORK" 스트링을 통해 분류할 수 있으며, 
FALLBACK 리소스로 분류하여 사용자가 네트웍에 연결되지 않았을 때 또는 사이트에 있는 리소스가 캐쉬되지 않았을 때, offlline html이 대신하여 사용자에게 보여질 수 있다.


<설명>

• # : 캐쉬될 파일들을 지정하는 곳
• NETWORK : 항상 네트웍을 통해 받아와야만 하는 파일을 지정
• FALLBACK : 네트웍에서 파일을 받아올 수 없을 때 보여줄 파일