HTML5 오프라인 애플리케이션 애플리케이션 캐시에 대한 자세한 코드 설명-H5 튜토리얼-php.cn

HTML5 오프라인 애플리케이션 애플리케이션 캐시에 대한 자세한 코드 설명

黄舟

풀어 주다： 2017-04-01 11:09:50

원래의

1569명이 탐색했습니다.

1. 응용 시나리오

우리는 주로 브라우저 캐시를 사용합니다. 단일 웹페이지를 사용자의 디스크에 저장하면 사용자가 다시 탐색할 때 대역폭이 절약되지만, 그럼에도 불구하고 여전히 인터넷 없이는 웹에 액세스할 수 없습니다. 오프라인 상태에서도 웹 애플리케이션에 접근할 수 있도록 하기 위함입니다. html5는 애플리케이션 캐시API를 통해 오프라인 저장 기능을 제공합니다. 전제는 방문해야 할 웹페이지가 온라인으로 한 번 이상 방문되었다는 것입니다.

오프라인 로컬 저장소와 기존 브라우저 캐시의 차이점은 무엇인가요?

1. 브라우저 캐시는 주로 두 가지 범주로 구성됩니다.

a. 캐시 협상: 마지막 수정, Etag

브라우저는 페이지가 수정되었는지 여부를 서버에 묻습니다. 수정사항이 없으면 304가 반환되고 브라우저는 로컬 캐시 파일을 직접 탐색합니다. 그렇지 않으면 서버가 새 콘텐츠를 반환합니다.

b. 완전한 캐싱: 캐시 제어, 만료

Expires를 통해 캐시 만료 시간을 설정하면 만료되기 전에 서버 요청과 상호 작용할 필요가 없습니다.

2. 오프라인 스토리지는 웹 전체에 대한 서비스를 제공하며, 브라우저 캐시는 단일 페이지만 캐시합니다.

3. 오프라인 스토리지는 캐시해야 할 파일과 캐시할 수 있는 파일을 지정할 수 있습니다. 캐시는 온라인으로만 탐색할 수 있습니다.

4. 오프라인 저장소는 사용자에게 업데이트를 동적으로 알릴 수 있습니다.

2. 구현 방법

오프라인 저장소는 매니페스트 파일을 통해 관리되며 서버 측 지원이 필요합니다. 지원을 활성화하는 방법은 서버마다 다릅니다.

매니페스트가 스토리지를 관리하도록 허용하려면 다음과 같이

html 태그

에 매니페스트

속성 을 정의해야 합니다.

CACHE MANIFEST//必须以这个开头
version 1.0 //最好定义版本，更新的时候只需修改版本号
CACHE:
    m.png
    test.js
    test.css
NETWORK:
    *
FALLBACK
    online.html offline.html

로그인 후 복사

마지막으로, 이러한 애플리케이션에는 서버 지원이 필요하다는 점을 잊지 마세요.

Apache 서버 지원을 활성화하는 방법은 다음과 같습니다: conf/mime.types에 코드 조각을 추가합니다:

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE HTML</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;"><a href="//m.sbmmt.com/java/java-ymp-Lang.html" target="_blank">lang</a></span><span style="color: #0000ff;">="en"</span><span style="color: #ff0000;"> manifest</span><span style="color: #0000ff;">=&#39;test.manifest&#39;</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;"><a href="//m.sbmmt.com/html/html-HEAD-2.html" target="_blank">head</a></span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">char<a href="//m.sbmmt.com/code/8209.html" target="_blank">set</a></span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><br/><br/><span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

로그인 후 복사

IIS 서버를 활성화하는 방법:

마우스 오른쪽 버튼 클릭-HTTP ---MIME 매핑에서 파일 형식을 클릭합니다. --- 새로 만들기 --- 확장명에 대한 매니페스트를 입력하고

유형에 대해 test/cache-manifest를 입력합니다. 3. JS

applicationCacheobject

를 통해 동적으로 업데이트 제어 오프라인 저장소의 대화형 프로세스를 관리하는 몇 가지 메서드와

이벤트를 제공합니다. firefox8.0 콘솔에 window.applicationCache를 입력하면 개체의 모든 속성과 이벤트 메서드를 볼 수 있습니다.

            test/cache-manifest manifest

로그인 후 복사

4. 브라우저와 서버의 상호 작용

다음과 같은 인터뷰 질문이 있었습니다. "브라우저의 주소 표시줄에 설명이 입력되었습니다: www.baidu. com 이후에 무슨 일이 일어났나요?

1. 서버가 바이두 페이지 리소스를 반환하고 브라우저가 html을 로드합니다

2. 브라우저가 구문 분석을 시작합니다

3. 링크를 찾아 로드 요청을 보냈습니다 CSS 파일

4. 브라우저가 페이지를 렌더링합니다

사진

을 찾아 사진 로드 요청을 보내고 다시 렌더링합니다

6. 요청 js 파일을 보내고 렌더링을 차단합니다. js가 dom에서 작동하면 다시 렌더링됩니다.

오프라인 저장소를 지원하는 페이지의 경우 브라우저와 서버 간의 상호 작용은 무엇입니까?

첫 번째 로드 페이지:

1-6: 위와 동일

7: 요청 페이지에서 캐시해야 하는 페이지 및 데이터, 이전 페이지에 있더라도 해당 단계에서 요청한 것입니다(에너지 소모가 심한 곳입니다)

8: 서버는 요청한 파일을 모두 반환하고 브라우저는 이를 로컬에 저장합니다

페이지 다시 로드:

1: 요청 보내기

2: 로컬에 저장된 오프라인 파일 사용

3: 페이지 구문 분석

4: 서버의 매니페스트 파일을 요청하여 변경사항이 있는지 확인하고, 304를 반환하면 변경사항이 없음을 의미하고 5단계로 이동하고, 그렇지 않으면 6단계로 이동합니다.

5: 첫 로딩 페이지의 7~8 입력

6: 로컬 저장소를 사용하고 재요청하지 않음

위 내용은 HTML5 오프라인 애플리케이션 애플리케이션 캐시에 대한 자세한 코드 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!