HTML5 오프라인 캐시는 Tomcat 아래에 배포되어 사진, 플래시 등의 오프라인 탐색을 가능하게 합니다._html5 튜토리얼 기술

웹페이지를 열었다가 로딩 후 갑자기 인터넷이 끊길 경우, 새로고침을 하면 해당 페이지가 사라집니다.
새 창에서 다른 페이지를 열고 동일한 URL을 입력하면 인터넷 연결이 끊어져도 페이지가 여전히 동일하다고 생각한 적이 있습니까? . HTML5 오프라인 애플리케이션은 이러한 기능을 제공합니다.
페이지의 데이터가 로드되면 일부 이미지, 플래시, CSS, js, html 및 기타 파일이 캐시되도록 설정할 수 있습니다. 캐시된 파일은 다음에 인터넷을 사용할 수 없을 때 사용할 수 있습니다. 이것은 HTML5의 오프라인 응용 프로그램입니다.
실제로 구현하는 것은 매우 간단합니다.

서버가 필요합니다. 여기서는 Tomcat 서버를 사용하여 설명합니다.
먼저 text/cache-manifest에 .manifest 접미사가 붙은 파일의 광산 유형을 구성합니다.
Tomcat 구성이라고 하면 익숙한 친구들이라면 자연스럽게 web.xml 파일을 떠올릴 것입니다. 예, 파일에 다음 구성을 추가하면 됩니다.

코드 복사

코드는 다음과 같습니다.

manifest ;mime-type> ;text/cache-manifest

그런 다음 xxx.manifest 파일을 작성하세요. xxx는 직접 선택한 이름입니다. . 이 파일의 형식은 다음과 같습니다.

코드 복사코드는 다음과 같습니다.

캐시 매니페스트
#version 1.5
캐시:
MyTest.html
CSS/main.css
Javascript/bwH5LS.js
exp-calif-logo.gif

첫 번째 줄은 필수이며 매니페스트 구성 파일임을 식별합니다.
#version 1.5
이 문장은 주석이지 실제 효과는 없습니다. 브라우저가 캐시 파일을 업데이트하기를 원할 뿐입니다. 매니페스트 파일이 원본과 동일하면 브라우저는 캐시 파일을 다시 로드하지 않으므로 이 주석을 사용하여 한편으로는 버전 번호를 수정하고 다른 한편으로는 브라우저가 캐시를 업데이트하도록 할 수 있습니다.
CACHE:
이 줄은 다음 파일이 캐시됨을 나타냅니다. 이 예에서는 현재 페이지인 MyTest.html과 일부 CSS, js 파일 및 이미지가 캐시됩니다.
언급되지 않은 몇 가지 키워드 예가 있습니다.
NETWORK:
FALLBACK:
NETWORK는 캐시를 원하지 않는 페이지를 참조하거나, FALLBACK은 요청한 파일을 찾을 수 없거나 서버를 참조합니다. 예를 들어 중첩된 페이지를 요청하고 싶지만 이 페이지의 서버에 연결할 수 없는 경우에는 지정된 다른 페이지로 이동할 수 있습니다.
이것은 두 번째 및 세 번째 단계입니다.
간단한 오프라인 애플리케이션을 구현합니다.


캐시된 파일은 어디에 있나요?
크롬에서 테스트한 결과 자체 메커니즘에 따라 이러한 파일을 청크로 저장하는 것으로 확인되었으므로 전체 파일을 찾을 수 없습니다. 저장된 데이터는 C:UsersjasonlingAppDataLocalGoogleChromeUser DataDefault에 있습니다. 구체적으로 저장하는 방법을 모르겠습니다.
Firefox의 파일도 자체 메커니즘에 따라 저장됩니다. 그러나 작성자는 SQLite로 파일을 연 후 캐시된 파일의 특정 정보를 발견했습니다.
관심 있는 독자는 직접 시도해 보고 작동하는지 확인할 수 있습니다. .새로운 발견.