Language/HTML

[HTML] Application Cache API

arajo 2022. 9. 21. 17:39
728x90

application cache API

application cache API는 웹 응용 프로그램을 캐시(cache) 하여, 인터넷 접속 없이 사용자가 접근할 수 있게 해준다.

따라서 application cache를 사용하면 웹 응용 프로그램의 오프라인 버전을 쉽게 만들 수 있다.

 

application cache를 사용해서 생기는 장점은 다음과 같다.

  • 오프라인 접속 : 사용자가 웹 응용 프로그램을 오프라인(off-line)으로도 사용할 수 있다.
  • 속도 : 캐시(cache)된 자원은 빠르게 로드(load)할 수 있다.
  • 서버의 부하 감소 : 웹 브라우저는 서버의 자원에 변동이 있을 때만 자원을 갱신하면 된다.

cache mainfest 기본 사항

애플리케이션 캐시를 활성화하려면 문서의 <html> 태그에 매니페스트 속성을 포함한다.

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

매니페스트 속성이 지정된 모든 페이지는 사용자가 방문할 때 캐시된다. 매니페스트 속성을 지정하지 않으면 페이지가 캐시되지 않는다.(페이지가 매니페스트 파일에 직접 지정되지 않는 한)

매니페스트 파일에 권장되는 파일 확장자는 ".appcache"이다.

매니페스트 파일 은 "text/cache-manifest"인 올바른 미디어 유형 으로 웹 서버에서 구성해야 한다.

cache mainfest 파일

application cache를 사용하기 위해서는 먼저 cache mainfest 파일을 작성해야 한다.

cache mainfest 파일은 웹 브라우저에 캐시(cache) 해야 할 파일과 캐시하지 말아야 할 파일을 알려주는 간단한 텍스트 파일이다.

 

이러한 mainfest 파일은 다음과 같이 세 개의 세션(session)으로 이루어진다.

  • CACHE MANIFEST : 처음 다운로드한 이후에 계속 캐시할 파일들을 기록한다. (이 헤더 아래에 나열된 파일은 처음 다운로드된 후 캐시된다.)
  • NETWORK : 서버와의 접속이 필요한 파일들을 기록하며, 이 파일들은 절대로 캐시되지 않는다. (이 헤더 아래에 나열된 파일은 서버에 연결해야 하며 캐시되지 않는다.)
  • FALLBACK : 파일에 접속할 수 없을 때에 대체할 파일들을 기록한다. (이 헤더 아래에 나열된 파일은 페이지에 액세스할 수 없는 경우 대체 페이지를 지정한다.)

캐시(cache)의 갱신

웹 브라우저는 다음과 같은 경우가 발생하면 캐시(cache)의 정보를 갱신하게 된다.

  • 사용자가 웹 브라우저의 캐시를 강제로 지웠을 경우
  • application cache가 프로그램 때문에 갱신됐을 경우
  • cache manifest 파일이 수정됐을 경우

Cache Manifest File은 첫 번째 줄인 CACHE MANIFEST가 필요하다.

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

위의 매니페스트 파일에는 CSS 파일, GIF 이미지 및 JavaScript 파일의 세 가지 리소스가 나열되어 있다. 매니페스트 파일이 로드되면 브라우저는 웹 사이트의 루트 디렉터리에서 세 개의 파일을 다운로드한다. 그러면 사용자가 인터넷에 연결되어 있지 않을 때마다 리소스를 계속 사용할 수 있다.

 

NETWORK 섹션은 "login.asp" 파일이 캐시되지 않아야 하며 오프라인에서 사용할 수 없도록 지정한다.

NETWORK:
login.asp

별표를 사용하여 다른 모든 리소스/파일에 인터넷 연결이 필요함을 나타낼 수 있다.

NETWORK:
*

 

아래의 FALLBACK 섹션은 인터넷 연결을 설정할 수 없는 경우에 대비하여 /html/ 카탈로그의 모든 파일 대신 "offline.html"이 제공되도록 지정한다. (첫 번째 URI는 리소스이고 두 번째 URI는 대체이다.)

FALLBACK:
/html/ /offline.html
Complete Cache Manifest File

CACHE MANIFEST
# nnnn-nn-nn vn.n.n

applicationCache_test.html
applicationCache_test.css
applicationCache_test.js

NETWORK:
test.jpg

FALLBACK:
/error.html

한 번 캐시 되면 서버상의 파일을 수정해도, 웹 브라우저는 사용자 측에 캐시 되어 있는 버전의 파일만을 보여준다.

따라서 서버상의 파일을 수정한 후에는 반드시 웹 브라우저가 캐시를 갱신하도록 만들어야 한다.

이때 가장 많이 사용되는 방법이 cache manifest 파일 내의 주석 부분을 수정하는 것이다.

일반적으로 갱신 날짜 및 버전 정보를 주석으로 표시하고, 이 부분을 수정하여 웹 브라우저가 캐시를 갱신하도록 유도한다.