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

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

May 16, 2016 pm 03:50 PM
톰캣 배포 오프라인 캐싱

웹페이지를 열었다가 로딩 후 갑자기 인터넷이 끊길 경우, 새로고침을 하면 해당 페이지가 사라집니다.
새 창에서 다른 페이지를 열고 동일한 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로 파일을 연 후 캐시된 파일의 특정 정보를 발견했습니다.
관심 있는 독자는 직접 시도해 보고 작동하는지 확인할 수 있습니다. .새로운 발견.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

내 HTML5 웹 사이트에 오디오를 추가하는 방법은 무엇입니까? 내 HTML5 웹 사이트에 오디오를 추가하는 방법은 무엇입니까? Mar 10, 2025 pm 03:01 PM

이 기사는 & lt; audio & gt를 사용하여 HTML5에 오디오를 포함시키는 방법을 설명합니다. 형식 선택에 대한 모범 사례 (MP3, OGG Vorbis), 파일 최적화 및 재생에 대한 JavaScript 컨트롤을 포함한 요소. 다중 오디오를 사용하는 것을 강조합니다

HTML5 페이지 가시성 API를 사용하여 페이지가 표시되는시기를 감지하려면 어떻게합니까? HTML5 페이지 가시성 API를 사용하여 페이지가 표시되는시기를 감지하려면 어떻게합니까? Mar 13, 2025 pm 07:51 PM

이 기사에서는 HTML5 페이지 가시성 API를 사용하여 페이지 가시성을 감지하고 사용자 경험을 향상 시키며 리소스 사용량을 최적화하는 것에 대해 설명합니다. 주요 측면에는 미디어 일시 정지, CPU 부하 감소 및 가시성 변경에 기반한 분석 관리가 포함됩니다.

HTML5 및 JavaScript로 대화 형 게임을 만드는 방법은 무엇입니까? HTML5 및 JavaScript로 대화 형 게임을 만드는 방법은 무엇입니까? Mar 10, 2025 pm 06:34 PM

이 기사는 JavaScript를 사용하여 대화식 HTML5 게임을 만드는 자세한 내용입니다. 게임 디자인, HTML 구조, CSS 스타일, JavaScript 로직 (이벤트 처리 및 애니메이션 포함) 및 오디오 통합을 다룹니다. 필수 JavaScript 라이브러리 (Phaser, PI

뷰포트 메타 태그를 사용하여 모바일 장치에서 페이지 스케일링을 제어하려면 어떻게합니까? 뷰포트 메타 태그를 사용하여 모바일 장치에서 페이지 스케일링을 제어하려면 어떻게합니까? Mar 13, 2025 pm 08:00 PM

이 기사에서는 Viewport Meta 태그를 사용하여 모바일 장치의 페이지 스케일링을 제어하여 폭과 최적의 응답 성 및 성능을위한 초기 스케일과 같은 설정에 중점을 둡니다. character count : 159

Geolocation API로 사용자 위치 개인 정보 및 권한을 어떻게 처리합니까? Geolocation API로 사용자 위치 개인 정보 및 권한을 어떻게 처리합니까? Mar 18, 2025 pm 02:16 PM

이 기사는 지리적 위치 API를 사용하여 사용자 위치 개인 정보 및 권한 관리, 권한 요청, 데이터 보안 보장 및 개인 정보 보호법 준수에 대한 모범 사례를 강조하는 것에 대해 설명합니다.

사용자 입력에 HTML5 양식을 사용하는 방법은 무엇입니까? 사용자 입력에 HTML5 양식을 사용하는 방법은 무엇입니까? Mar 10, 2025 pm 02:59 PM

이 기사에서는 HTML5 양식을 작성하고 검증하는 방법을 설명합니다. 그것은 & lt; form & gt; 요소, 입력 유형 (텍스트, 이메일, 번호 등) 및 속성 (필수, 패턴, 최소, 최대). HTML5의 장점은 오래된 방법에 비해 형성됩니다

HTML5 알림 API를 사용하여 데스크탑 알림을 표시하는 방법은 무엇입니까? HTML5 알림 API를 사용하여 데스크탑 알림을 표시하는 방법은 무엇입니까? Mar 13, 2025 pm 07:57 PM

이 기사는 HTML5 알림 API를 사용하여 허가 요구 사항, 사용자 정의 및 브라우저 지원에 중점을 둔 데스크탑 알림을 표시하는 방법을 설명합니다.

대화식 사용자 인터페이스에 HTML5 드래그 앤 드롭 API를 어떻게 사용합니까? 대화식 사용자 인터페이스에 HTML5 드래그 앤 드롭 API를 어떻게 사용합니까? Mar 18, 2025 pm 02:17 PM

이 기사는 HTML5 드래그 앤 드롭 API를 사용하여 대화식 사용자 인터페이스를 생성하고 요소를 드래그 가능하게 만들고 주요 이벤트를 처리하며 사용자 정의 피드백으로 사용자 경험을 향상시키는 방법을 자세히 설명합니다. 또한 일반적인 함정에 대해 설명합니다

See all articles