HTML5 App cache 적용시 주의해야할 점…

HTML5에선 offline web application을 위해 application cache라는 것이 추가되었다.

HTML5 application cache 사용하기

사용법은 매우 간단하다. 아래 코드에서와 같이 html태그에 manifest 속성을 추가해주면 된다.

이 때 cache.manifest 파일은 HTTP Header의 Content-type이 text/cache-manifest여야만 한다.

그리고 cache.manifest에서 cache될 파일들에 대한 정보는 다음과 같이 정의한다.

이렇게 해주면 처음 접속시 cache.manifest에 있는 파일을 읽어서 캐쉬에 저장한다. 그 후로는 접속 시에 cache.manifest만을 받아오고, 이 파일이 업데이트 되지 않았다면 캐쉬에 있는 내용을 사용한다.

그리고 업데이트 되었더라도 요번 접속 때는 캐쉬에 있는걸 사용하고, 다음에 다시 접속했을 때부터 업데이트된 내용이 적용된다.

HTML5 application cache 사용시 주의점

처음 application cache를 적용할 때 manifest 파일은 내가 캐쉬하고 싶은 파일들에 대해서만 관여하는 줄 알았다. 하지만 실제는 이와 좀 다르다.

‘manifest 파일에 지정되지 않은 파일들은 두번째 접속 때부턴 무조건 받아오지 못한다.’

첫째로 날 당황시켰던 내용! 캐쉬되지 않았으면 좋겠는 파일이 있다면 꼭! manifest의 NETWORK: 항목에 추가해두어야 한다.

manifest에 없는 파일은 캐쉬될 필요가 없다는 것이 아니라 그런 파일따위 안쓴다라고 해석하는 것 같다.

‘Safari에서는 manifest 파일의 Last-modified Date가 변화하더라도 캐쉬를 업데이트해주지 않는다.’

둘째로 날 당황시켰던 내용! 개발 과정에서 cache를 적용한 후, 중간중간 파일이 변했음을 알려주기 위해 cache.manifest를 touch해줬지만 캐쉬가 갱신되질 않았다.

아파치의 에러 로그를 확인하지 않았다면, 계속 내 코드를 탓했을 지도 모르겠다.

사파리의 구현 문제인지 아니면 HTML5에서 그렇게 구현하라고 이야기하고 있는지는 모르겠지만 어쨌든 ‘캐쉬를 갱신시키려면 manifest의 수정된 날짜를 변경시키는 것만으로는 부족하고, 내용을 한 자라도 바꿔야 한다. 하다못해 주석이라도 바꿔줘야 한다.’

HTTP header에는 Last-modified-since? 뭐 하튼 비슷한 헤더가 있기 때문에 touch 만으로도 해결할 수 있을 줄 알았는데 이거 좀 의외였다.

어쨌든 적용해놓고 나니까 확실히 좋다. 페이지 로딩도 빨라졌고, 데이터 사용량도 줄일 수 있을 거 같다.

오늘의 이야기는 여기서 끝!

Published by

6 thoughts on “HTML5 App cache 적용시 주의해야할 점…”

  1. manifest 업데이트후 다음접속시에 적용되는게 맘에 안들어서 업데이트된뒤에 자동으로 리프레쉬를 시키는방법을 써봤는데 사용자를 엿먹이는거 같아서 관둔적이 있습니다…
    좋은내용 캄사~!

  2. 안녕하세요, 포스팅 내용 잘봤습니다.
    제가 들은 바론 manifest 정의 파일에서 아래와 같이 버전 정보를 명시하시면
    원하는 효과를 얻으실 수 있습니다.

    CACHE MANIFEST

    # Version 20100907 18:00:00

    그리고, 항상 읽어와야 하는 파일은 *이 사용 가능하니 도움이 될 수 있을 듯 합니다..
    NETWORK:
    *

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">