요청이 없고 트래픽이 없는 웹사이트를 만들기 위한 HTML5 오프라인 애플리케이션 솔루션_html5 튜토리얼 기술

머리말

현재의 웹 애플리케이션은 이미 매우 복잡합니다. 현재 개발로 인해 점점 더 복잡해질 것입니다. 그러나 인터넷과의 연결을 끊을 수 없다는 치명적인 결함이 있습니다. HTML로,

이 문제를 잘 해결하기 위해 로컬 저장 메커니즘을 사용하여 오프라인 웹 애플리케이션의 길을 열었습니다.
브라우저 캐시의 로컬 캐시

코드 복사

코드는 다음과 같습니다.

로컬 캐시는 전체 웹 애플리케이션을 제공합니다.
브라우저 캐시는 단일 웹페이지만 제공합니다

모든 웹페이지에는 웹페이지 캐시가 있습니다.
로컬 캐시는 캐시하도록 지정한 페이지만 캐시합니다

웹 페이지 캐싱은 웹사이트에 어떤 페이지와 리소스가 캐시되어 있는지 모르기 때문에 신뢰할 수 없고 안전하지 않습니다.
로컬 캐싱은 캐시되는 콘텐츠를 제어할 수 있습니다

매니페스트 파일

웹 애플리케이션의 로컬 캐시는 각 페이지의 매니페스트 파일을 통해 관리됩니다. 매니페스트는 캐시해야 하는 파일과 캐시할 필요가 없는 파일의 이름과 경로를 간단한 텍스트 형식으로 나열한 것입니다. .

매니페스트는 각 페이지 또는 전체 애플리케이션에 대해 개별적으로 지정할 수 있습니다. 예를 들어 hello.htm에 대한 설정은

코드 복사

코드는 다음과 같습니다:

CACHE MANIFEST
CACHE:
other.html
hellow.js
images/myphoto.jpg
네트워크:
http://LuLinniu/NotOffline
NotOffline.asp
*
폴백:
online.js locale.js
CACHE:
newhellow.html
newhellow .js

매니페스트 파일에서 첫 번째 줄은 CACHE MANIFEST여야 브라우저에 텍스트의 역할을 알려줍니다. 즉, 로컬에서 리소스 파일에 대한 특정 설정을 지정해야 합니다. 은닉처.
실제로 오프라인 웹 애플리케이션을 동시에 실행하는 경우 서버가 text/cache-manifest MIME 유형을 지원하도록 서버를 구성해야 합니다.

파일 소스 파일 지정 시 리소스 파일은 CACHE, NETWORK, FALLBACK 3가지 카테고리로 나눌 수 있습니다

코드 복사

코드는 다음과 같습니다.

CACHE 카테고리에서 로컬로 캐시해야 하는 리소스 파일을 지정하세요. 특정 페이지에 대해 로컬로 캐시해야 하는 리소스 파일을 지정하는 경우에는 CACHE 카테고리에서 페이지 자체를 지정할 필요가 없습니다.
페이지에 매니페스트 파일이 있으면 브라우저가 자동으로 페이지를 로컬에 캐시하기 때문입니다

NETWORK 카테고리는 캐시되지 않도록 명시적으로 지정된 리소스 파일입니다. 이러한 파일은 서버 측 링크를 설정해야만 액세스할 수 있습니다. 이 예에서는 와일드카드 *를 사용하여 기록되지 않는 파일을 나타냅니다. 캐시되지 않습니다

FALLBACK 카테고리의 각 줄은 두 개의 리소스 파일을 지정합니다. 첫 번째 리소스 파일은 온라인으로 액세스할 수 있을 때 사용되는 리소스 파일이고, 두 번째는 온라인으로 액세스할 수 없을 때 사용되는 로컬 캐시 파일입니다.

브라우저와 서버 간의 상호작용 과정

오프라인 웹 애플리케이션으로 작업할 때는 브라우저와 서버 간의 상호 작용 프로세스를 이해해야 합니다.

코드 복사

코드는 다음과 같습니다.

예를 들어 http://LuLingniu, index.htm을 홈페이지로 하면 홈페이지는 index.manifest를 사용하고,
index.htm을 캐시합니다. hello.js, hello.jpg 파일에서 첫 번째 방문의 과정은 다음과 같습니다.
브라우저가 url을 요청합니다
서버가 index.htm 홈페이지를 반환합니다
브라우저가 인덱스를 구문 분석합니다. htm 웹페이지에서 해당 페이지의 모든 리소스 파일을 요청합니다
서버는 리소스 파일
을 반환합니다. 브라우저는 매니페스트 파일을 처리하고 매니페스트에 캐시해야 하는 파일을 요청한 경우에도 마찬가지입니다. 다시 요청합니다
. 서버는 캐시해야 하는 파일을 반환합니다.
브라우저는 로컬 캐시를 업데이트하고 이를 저장하고 로컬 캐시 업데이트를 알리는 이벤트를 트리거합니다

URL 다시 열기
URL 요청
브라우저는 페이지가 캐시된 것을 발견하고 로컬 캐시 파일을 사용합니다
파일을 구문 분석합니다
브라우저는 다음에서 매니페스트 파일을 요청합니다. server
서버가 304를 반환하면 매니페스트 파일이 변경되지 않았음을 알립니다(변경되면 달라질 수 있음)

applicationCache 객체

이 개체는 로컬 캐시를 나타내며, 로컬 캐시가 업데이트되었음을 ​​사용자에게 알리는 데 사용할 수 있으며 로컬 캐시를 수동으로 업데이트할 수도 있습니다.

브라우저가 로컬 캐시를 업데이트하고 새 리소스 파일을 로드하면 applicationCache 개체의 updateready 이벤트가 트리거되어 로컬 캐시가 수정되었음을 알리고 사용자에게 페이지를 수동으로 새로 고치라는 메시지가 표시됩니다.
스왑 캐시

swapCache 메소드는 로컬 캐시 업데이트를 수동으로 수행하는 데 사용됩니다. 이는 applicationCache 객체의 updateReady 이벤트가 트리거될 때만 호출할 수 있습니다.

즉, 리소스 파일이 변경되면 이 방법을 사용하여 업데이트를 수동으로 캐시할 수 있습니다.