HTML5의 캐시 매니페스트

Cache manifest in HTML5
이 기사는 웹 페이지를 오프라인에서 액세스할 수 있게 하는 구식 기술에 관한 것이다.일반 HTTP 캐시는 웹 캐시를 참조하십시오.오프라인 앱을 만드는 최신 기술은 Progressive 웹 응용 프로그램을 참조하십시오.
파일 이름 확장명
.appcache
인터넷 미디어 유형
문자/문자 교환
개발자월드 와이드 웹 컨소시엄
표준HTML5
오픈 포맷?네
웹사이트html.spec.whatwg.org/multipage/browsers.html#offline

HTML5의 캐시 매니페스트는 네트워크 연결 없이도 웹 애플리케이션에 액세스할 수 있는 기능을 제공하는 소프트웨어 스토리지 기능이다.2014년 10월 28일 W3C 권고안의 일부가 되었다.[1]

2021년 현재 이 기술은 더 이상 널리 보급되지 않고 있다.Firefox 85에서 제거되었으며,[2] Chrome 84에서는 기본적으로 비활성화되고 Chrome 95에서는 제거되었다.[3]이 때 오프라인 웹 애플리케이션 기능 중 하나를 사용하는 것은 매우 금지되며 대신 서비스 작업자의 사용을 권장한다.[4]

배경

웹 애플리케이션은 네트워크에서 다운로드해야 하는 웹 페이지로 구성된다.이를 위해서는 네트워크 연결이 있어야 한다.그러나 사용자가 통제할 수 없는 상황으로 인해 네트워크에 접속하지 못하는 경우가 많다.HTML5는 캐시 매니페스트를 사용하여 네트워크 연결 없이도 웹 애플리케이션에 액세스할 수 있는 기능을 제공한다.

웹 애플리케이션은 URL로 식별된 리소스로 구성된다.이것들은 HTML, CSS, JavaScript, 이미지 또는 웹 응용 프로그램이 렌더링되는 데 필요한 다른 소스가 될 수 있다.그들의 주소는 매니페스트 파일로 복사될 수 있으며, 웹 애플리케이션의 작성자에 의해 정기적으로 업데이트될 수 있으며, 추가되거나 삭제된 새로운 웹 주소를 나타낸다.처음으로 네트워크에 연결하면 웹 브라우저가 HTML5 매니페스트 파일을 읽고 주어진 리소스를 다운로드하여 로컬로 저장한다.그런 다음, 네트워크 연결이 없는 경우, 웹 브라우저는 대신 로컬 복사본으로 이동하고 웹 애플리케이션을 오프라인으로 렌더링한다.

기본 사항

오프라인 응용 프로그램이 작동하려면 웹 개발자가 캐시 매니페스트 파일을 만들어야 한다.웹 응용 프로그램이 두 페이지 이상을 초과하는 경우, 각 페이지는 캐시 매니페스트를 가리키는 매니페스트 속성을 가져야 한다.매니페스트를 참조하는 모든 페이지는 로컬로 저장될 것이다.[5]캐시 매니페스트 파일은 서버의 다른 부분에 위치한 텍스트 파일이다.컨텐츠 유형과 함께 제공되어야 함text/cache-manifest[6]

속성manifest="<path>"캐시 매니페스트 파일이 작동하려면 html 요소에 추가되어야 한다.[6]예:

<!DOCTYPE HTML> <html 매니페스트="cache.appcache"> <body> …</body> </html>

매니페스트 속성에 대한 인수는 매니페스트 파일에 대한 상대 경로 또는 절대 경로다.

아래에 제공된 HTML 파일을 고려하십시오.<html> 요소는 cache.appcache라는 이름의 파일이 이 웹 페이지가 오프라인으로 작동하는 데 필요한 리소스 목록(예: test.js, test.css)을 포함함을 나타낸다.이 파일의 일반 이름은 cache.manifest 및 manifest.appache입니다. 

<!——- test.property --> <!DOCTYPE HTML <html 매니페스트="cache.appcache"> <head> <title>테스트</title><script src="test.js"</script><link rel="스타일시트" href="test.css"> </head> 매니페스트 파일 테스트.</몸> </몸>

구문

매니페스트 파일은 라인으로 시작해야 함CACHE MANIFEST코멘트 시작은#, 공백과 빈 줄은 무시된다.[7]

캐시 매니페스트 파일의 예는 아래와 같다.

예 1: 

캐시 매니페스트 /test.css /test.js /test.png

이 매니페스트 파일에는 CSS 파일, JavaScript 파일 및 PNG 이미지의 세 가지 리소스가 나열되어 있다.위의 파일이 로드되면 브라우저는 웹 서버의 루트 디렉토리에서 test.css, test.js 및 test.png 파일을 다운로드한다.[6]결과적으로, 자신의 네트워크가 연결되지 않을 때마다, 오프라인에서 자원을 이용할 수 있게 될 것이다.

캐시 매니페스트도 아래와 같이 상대 경로나 절대 URL을 사용할 수 있다.[7][8][9]

예 2: 

캐시 매니페스트 /main/features.js /main/settings/index.css http:///files/images/scene.jpg htttp:///files/images/world.jpg

파일 헤더

캐시 매니페스트 파일은 세 개의 섹션 헤더로 구성된다.[6]

  1. 머리글 캐시가 있는 명시적 섹션.
  2. 네트워크 머리글이 있는 온라인 화이트리스트 섹션
  3. 머리글이 있는 폴백 섹션

참고: 위의 예 1과 예 2는 섹션 헤더를 표시하지 않으므로 기본적으로 명시적인 섹션으로 간주된다.

네트워크 머리글이 있는 온라인 화이트리스트 섹션

예 3: 

캐시 매니페스트 네트워크: /checking.cgi 캐시: /test.css /test.js /test.png

이 예는 헤더로 구성된다.네트워크: 행은 "온라인 화이트리스트" 섹션의 시작이다.이 섹션에 나열된 리소스는 캐시되지 않으며 오프라인에서 사용할 수 없다.[6]결과적으로, 자원을 로드하기 위해 오프라인으로 시도할 때 오류가 발생할 것이다.

CASH: 헤더에 의한 명시적 섹션으로의 이동이 있으며, 리소스(CSS 스타일시트, JavaScript 및 이미지 파일)를 오프라인으로 다운로드하여 사용할 수 있다.

머리글이 있는 폴백 섹션

캐시 매니페스트 파일의 예비 섹션을 사용하여 캐시할 수 없거나 성공적으로 캐시되지 않은 온라인 리소스를 대체할 수 있다.[6]

예 4: 

캐시 매니페스트 폴백: / /offline.html 네트워크: …

예제 4에서 폴백 섹션은 단일 선(예: /offline.html)으로 구성된다.'오프라인' 이전의 단일 문자(/)는 사이트의 URL 패턴과 일치한다.[6]브라우저가 appcache에서 페이지를 찾지 못할 경우, 애플리케이션은 page /offline.html을 표시할 것이다.

이벤트 흐름

사건들은 다음에 있다.ApplicationCacheJavaScript 객체.

브라우저가 웹 페이지를 방문하여 이전에 웹 페이지를 본 적이 없고 결과적으로 매니페스트 파일을 인식하지 못하는 경우 다음과 같은 이벤트가 뒤따를 것이다.[7]

  • CheckingEvent - 브라우저가 웹 페이지를 방문하여 <html> 요소의 매니페스트 속성을 읽을 때 발생한다.
  • Downloading이벤트 - 매니페스트 파일에 지정된 모든 리소스를 다운로드한다.
  • Progress이벤트 - 다운로드한 파일 수와 다운로드해야 할 파일 수에 대한 정보를 포함한다.
  • CachedEvent - 모든 파일이 다운로드되고 오프라인 웹 애플리케이션이 오프라인에서 사용될 수 있게 되면 발생한다.

브라우저가 이전에 웹 페이지를 방문한 적이 있고 매니페스트 파일을 인식한다면 다음과 같은 이벤트가 뒤따를 것이다.[7]

  • Noupdate이벤트 - 캐시 매니페스트가 변경되지 않은 경우 이 작업이 수행됨.
  • Downloading이벤트 - 캐시 매니페스트가 리소스를 변경한 경우 파일이 다시 다운로드된다.
  • Progress이벤트 - 다운로드한 파일 수와 다운로드해야 할 파일 수에 대한 정보가 들어 있다.
  • Updateready이벤트 - 재다운로드 완료 후 이 이벤트가 트리거되어 새 오프라인 버전을 사용할 준비가 되었음을 나타냄

위의 이벤트에서 임의의 인스턴스에서 오류가 발생하면 브라우저가 오류 이벤트를 트리거하고 프로세스를 중지한다.아래에는 리소스를 재다운로드할 때 발생할 수 있는 몇 가지 오류가 나와 있다.[8]

  • 페이지를 찾을 수 없음(HTTP 오류 404) 또는 페이지 영구 삭제(HTTP 오류 410).
  • 매니페스트를 가리킨 HTML 페이지 다운로드 실패.[6]
  • 업데이트가 발생하는 동안 캐시 매니페스트가 변경됨.[6]
  • 캐시 매니페스트가 변경되었지만 브라우저가 매니페스트의 리소스를 다운로드하지 않았다.[6]

참고 항목

참조

  1. ^ "Application cache as part of the W3C Recommendation". 28 October 2014. Retrieved 30 May 2016.
  2. ^ "Using the application cache - HTML: HyperText Markup Language MDN". developer.mozilla.org. Retrieved 2021-04-11.
  3. ^ "Preparing for AppCache removal". web.dev. Retrieved 2021-09-02.{{cite web}}: CS1 maint : url-status (링크)
  4. ^ "Window.applicationCache". MDN Web Docs. Mozilla. Retrieved 2020-12-29.
  5. ^ Bidelman, Eric (29 October 2013). "A Beginner's Guide to Using the Application Cache". Retrieved 23 April 2014.
  6. ^ a b c d e f g h i j Pilgrim, Mark (2010). HTML5 Up and Running. O'Reilley. Archived from the original on 2011-10-03. Retrieved 2018-11-16.
  7. ^ a b c d "W3 HTML5 Manifests". HTML5. Retrieved 3 April 2011.
  8. ^ a b "Dev.Opera". HTML5. Retrieved 3 April 2011.
  9. ^ "WHATWG". HTML5. Archived from the original on 14 April 2011. Retrieved 3 April 2011.

외부 링크