h5 오프라인 캐시란 무엇인가요? h5 매니페스트 오프라인 캐싱 애플리케이션(코드 포함)-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

h5 오프라인 캐시란 무엇인가요? h5 매니페스트 오프라인 캐싱 애플리케이션(코드 포함)

不言

Aug 08, 2018 pm 03:10 PM

html5

매니페스트란 무엇인가요? 매니페스트는 캐싱이 필요한 파일을 정의하는 접미사 이름이 minifest인 파일입니다. 매니페스트를 지원하는 브라우저는 매니페스트 파일의 규칙에 따라 파일을 로컬에 저장하므로 네트워크 링크가 없더라도 액세스할 수 있습니다. 페이지.

웹 기반 애플리케이션에서는 오프라인 액세스가 점점 더 중요해지고 있습니다. 모든 브라우저에는 캐싱 메커니즘이 있지만 신뢰할 수 없으며 항상 예상대로 작동하지 않을 수도 있습니다. HTML5는 오프라인으로 인해 발생하는 일부 문제를 해결하기 위해 ApplicationCache 인터페이스를 사용합니다.

캐시 인터페이스를 사용하면 애플리케이션에 다음과 같은 세 가지 이점이 있습니다.

오프라인 검색 - 사용자는 오프라인 상태에서도 애플리케이션을 검색할 수 있습니다. 웹사이트 완성 # 🎜🎜#
속도 - 캐시된 리소스는 로컬 리소스이므로 로딩 속도가 더 빠릅니다.
서버 부하 감소 - 브라우저는 변경된 서버에서만 리소스를 다운로드합니다.

애플리케이션 캐시(AppCache라고도 함)를 사용하면 개발자는 오프라인 사용자가 액세스할 수 있도록 브라우저가 캐시해야 하는 파일을 지정할 수 있습니다. 사용자가 오프라인 상태에서 새로 고침 버튼을 눌러도 앱은 정상적으로 로드되고 실행됩니다.

매니페스트 파일을 참조하세요.

애플리케이션에 대한 애플리케이션 캐싱을 활성화하려면 문서의 html 태그에 매니페스트 속성을 추가하세요. #🎜🎜 #manifest 속성은 절대 URL 또는 상대 경로를 가리킬 수 있지만 절대 URL은 해당 웹 애플리케이션에서 시작되어야 합니다. 매니페스트 파일은 모든 파일 확장자를 사용할 수 있지만 올바른 MIME 유형으로 제공되어야 합니다(아래 참조).

<html manifest="/cache.manifest">
  ...
</html>

或

<html manifest="http://www.example.com/example.mf">
  ...
</html>

로그인 후 복사

캐시하려는 웹 앱의 모든 페이지에 매니페스트 속성을 추가해야 합니다. 웹 페이지에 매니페스트 속성이 포함되어 있지 않으면 브라우저는 해당 속성이 매니페스트 파일에 명시적으로 나열되어 있지 않은 한 페이지를 캐시하지 않습니다. 이는 매니페스트가 포함된 사용자가 탐색하는 모든 웹페이지가 암시적으로 애플리케이션 캐시에 추가된다는 의미입니다. 따라서 인벤토리의 모든 페이지를 나열할 필요는 없습니다.

Manifest 파일은 text/cache-manifest MIME 유형으로 제공되어야 합니다. 파일 접미사 이름은 사용자 정의할 수 있으므로(.manifest 권장) 이제 서버에서 .manifest 접미사가 있는 파일 형식을 text/cache-manifest로 선언해야 합니다.

아파치를 예로 들면 다음을 추가해야 합니다: AddType text/cache-manifest .manifest

.manifest后缀的文件类型声明为text/cache-manifest。
以apache为例，我们需要在httpd.conf中加上：AddType text/cache-manifest .manifest

Manifest 파일 구조# 🎜🎜## 🎜🎜#

간단한 매니페스트 형식은 다음과 같습니다.

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js

로그인 후 복사

이 예에서는 이 매니페스트 파일을 지정하는 웹 페이지의 4개 파일을 캐시합니다.

다음 사항에 주의해야 합니다.

CACHE MANIFEST 문자열은 첫 번째 줄에 있어야 하며 필수입니다.

웹사이트의 캐시된 데이터 크기는 5MB를 초과할 수 없습니다. 그러나 Chrome 웹 스토어용 앱을 작성하는 경우 unlimitedStorage를 사용하여 이 제한을 제거할 수 있습니다.

매니페스트 파일 또는 여기에 지정된 리소스를 다운로드할 수 없는 경우 전체 캐시 업데이트 프로세스를 진행할 수 없습니다. 이 경우 브라우저는 원래 애플리케이션 캐시를 계속 사용합니다.

좀 더 복잡한 예를 살펴보겠습니다.

CACHE MANIFEST
# 2010-06-18:v2

# Explicitly cached 'master entries'.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

# Resources that require the user to be online.
NETWORK:
login.php
/myapi
http://api.twitter.com

# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html

로그인 후 복사

"#"으로 시작하는 줄은 주석 줄이지만 다른 목적으로 사용될 수 있습니다. 예를 들어 캐시 업데이트

애플리케이션 캐시는 매니페스트 파일이 변경될 때만 업데이트됩니다. 예를 들어 이미지 리소스를 수정하거나 JavaScript 기능을 변경하는 경우 해당 변경 사항은 다시 캐시되지 않습니다. 브라우저가 캐시 파일을 새로 고칠 수 있도록 매니페스트 파일 자체를 수정해야 합니다. 생성된 버전 번호, 파일 해시 또는 타임스탬프가 포함된 주석 줄을 생성하면 사용자가 최신 버전의 소프트웨어를 사용할 수 있습니다.

캐시 업데이트 섹션에 설명된 대로 새 버전이 나타난 후 프로그래밍 방식으로 캐시를 업데이트할 수도 있습니다.

페이지에서 캐시 매니페스트 파일을 소개하는 경우 매니페스트 파일에는 현재 페이지에 필요한 모든 파일(css, js, 이미지...)이 포함되어야 합니다. 그렇지 않으면 로드되지 않으므로 캐시해야 하는 파일이 제거되면 파일의 NETWORK 항목에 별표 *를 추가하는 것이 좋습니다. 이는 다른 모든 파일

목록에 다음 세 가지 부분이 포함될 수 있음을 나타냅니다. : 캐시, 네트워크 및 대체.

CACHE:

이 항목의 기본 부분입니다. 이 헤더 아래에 나열된 파일(또는 CACHE MANIFEST 바로 다음 파일)은 처음 다운로드될 때 명시적으로 캐시됩니다.

NETWORK:

이 섹션에 나열된 파일은 서버에 연결해야 하는 화이트리스트 리소스입니다. 이러한 리소스에 대한 모든 요청은 사용자가 오프라인인지 여부에 관계없이 캐시를 우회합니다. 와일드카드를 사용할 수 있습니다.

FALLBACK:

이 섹션은 선택 사항이며 리소스에 액세스할 수 없는 경우 대체 페이지를 지정하는 데 사용됩니다. 첫 번째 URI는 리소스를 나타내고 두 번째 URI는 대체 웹 페이지를 나타냅니다. 두 URI는 모두 관련되어 있어야 하며 매니페스트 파일과 원본이 동일해야 합니다. 와일드카드를 사용할 수 있습니다. 참고: 섹션은 순서에 관계없이 정렬될 수 있으며 각 섹션은 동일한 목록에 반복적으로 나타날 수 있습니다.

다음 목록은 사용자가 사이트의 루트에 오프라인으로 액세스하려고 할 때 표시되는 "포괄적" 페이지(offline.html)를 정의하고 다른 모든 리소스(예: 원격 사이트)에는 인터넷 연결이 필요합니다.

CACHE MANIFEST
# 2010-06-18:v3

# Explicitly cached entries
index.html
css/style.css

# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html

# All other resources (e.g. sites) require the user to be online.
NETWORK:
*

# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png

로그인 후 복사

참고: 매니페스트 파일을 참조하는 HTML 파일은 자동으로 캐시됩니다. 따라서 목록에 추가할 필요는 없지만 추가하는 것이 좋습니다.

참고: SSL을 통해 제공되는 페이지에 설정된 HTTP 캐시 헤더 및 캐시 제한은 캐시 매니페스트로 대체됩니다. 따라서 https를 통해 제공되는 웹페이지는 오프라인으로 실행될 수 있습니다.

UPDATE 캐시

다음 중 하나가 발생하지 않는 한 앱은 오프라인 동안 캐시된 상태로 유지됩니다.

사용자가 웹사이트에 대한 브라우저의 데이터 저장소를 지웁니다.
매니페스트 파일이 수정되었습니다. 참고: 매니페스트에 나열된 파일을 업데이트한다고 해서 브라우저가 리소스를 다시 캐시한다는 의미는 아닙니다. 매니페스트 파일 자체를 변경해야 합니다.
앱 캐시는 프로그래밍 방식으로 업데이트됩니다.