1. 프로그래밍

HTML5 manifest 애플리케이션 캐시 사용하기

application cache manifest 사용하기


먼저 애플리케이션 웹 캐시를 사용하기 전에 캐싱의 기본 개념부터 알아 보겠습니다.

캐싱은 애플리케이션의 속도를 높여주는 도구로 이미 가져온 데이터나 결과값의 복사본을 저장하여

처리 속도를 향상 시키며 다음 요청을 더 빠르게 처리할 수 있습니다.

대부분의 프로그램은 동일한 데이터와 명령어를 사용하여 access 하기 때문에 캐싱은 효율적인 아키텍처 패턴 입니다.


웹 캐시는 사용자(클라이언트)가 웹 사이트에 접속할 때 정적인 페이지 또는 컨텐츠 (image, css, javascript) 등을

클라이언트나 네트워크에 저장하여 웹 사이트 서버에 해당 컨텐츠를 재요청 하는 것이 아닌 특정 위치에서 불러와

웹사이트의 응답시간을 줄이고 서버 트래픽도 감소 효과를 볼 수 있습니다.


캐시의 종류는 다양하고 어디에 어떻게 적용하느냐에 따라 가용성과 신뢰성, 성능 등을 향상 시킬 수 있습니다.

우리가 알아볼 캐시는 Html5 manifest 캐시 사용 방법 입니다.


- application cache의 장점 3가지

1. 오프라인 접속이 가능합니다.

2. 캐시된 자원을 빠르게 로드합니다.

3. 웹브라우저는 서버의 자원 변동이 있을 때만 자원을 갱신하면 됩니다.


- cache manifest 파일 작성

애플리케이션 캐시를 사용하기 위해서는 cache manifest 파일을 작성해야 합니다.

사용방법 또한 간단 합니다.

CACHE MANIFEST, NETWORK, FALLBACK 세 개의 세션을 명시해 줍니다.


CACHE MANIFEST 는 처음 다운로드 한 이후 캐시할 파일들을 기록

NETWORK 는 서버와의 접속이 필요한 파일들을 기록, 이 파일들은 절대로 캐시되지 않습니다.

FALLBACK 은 파일에 접속할 수 없을 때 ERROR 페이지를 기록 합니다.


- cache 갱신 조건

캐시가 갱신되는 시점 3가지 입니다.

1. 사용자가 웹 브라우저의 캐시를 강제로 삭제

2. application cache가 프로그램으로 인해 갱신

3. cache manifest 파일의 수정


- application cache menifest 파일 작성

  1. CACHE MANIFEST
  2. # 2020-06-02 v1.0.0
  4. applicationCache_test.html
  5. applicationCache_test.css
  6. applicationCache_test.js
  7.  
  9. NETWORK:
  10. test.jpg
  12. FALLBACK:
  13. /error.html


- JSP, HTML, 서블릿 페이지 선언

  1. <!DOCTYPE html>
  2. <html lang="ko" manifest="http://사이트주소/appcache.manifest">

- Javascript 

  1. window.addEventListener('load', function(e) {
  2.     window.applicationCache.addEventListener('updateready', function(e) {
  3.         if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
  4.             window.applicationCache.swapCache();
  5.             window.location.reload();
  6.         } else {}
  7.     },false);
  8. },false);

이상, Html5 manifest 캐시 설정 사용하기 였습니다.
* 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음
작성자 소개
초이 프로필
WrapUp 블로거

초이

반려견을 좋아하고, 차를 좋아하고, 여행을 좋아하고, 맛집을 찾아 즐기는 웹 개발자 입니다^^