웹 기반 애플리케이션에서는 오프라인 액세스가 점점 더 중요해지고 있습니다. 모든 브라우저에는 캐싱 메커니즘이 있지만 신뢰할 수 없으며 항상 예상대로 작동하지 않을 수도 있습니다. HTML5는 오프라인으로 인해 발생하는 일부 문제를 해결하기 위해 ApplicationCache 인터페이스를 사용합니다.
캐시 인터페이스를 사용하면 애플리케이션에 세 가지 이점이 있습니다.
응용 프로그램 캐시(AppCache라고도 함)를 사용하면 개발자는 오프라인 사용자가 액세스할 수 있도록 브라우저에서 캐시해야 하는 파일을 지정할 수 있습니다. 사용자가 오프라인 상태에서 새로 고침 버튼을 눌러도 앱은 정상적으로 로드되고 실행됩니다.
참조 매니페스트 파일앱에 대한 앱 캐싱을 활성화하려면 문서의 html 태그에 매니페스트 속성을 추가하세요.
매니페스트 속성은 절대 URL 또는 상대 경로를 가리킬 수 있지만 절대 URL은 해당 웹 애플리케이션과 동일한 출처를 가져야 합니다. 매니페스트 파일은 모든 파일 확장자를 사용할 수 있지만 올바른 MIME 유형으로 제공되어야 합니다(아래 참조).
<html 매니페스트=/cache.manifest> ...</html>
또는
<html 매니페스트=http://www.example.com/example.mf> ...</html>
캐시하려는 웹 애플리케이션의 모든 페이지에 매니페스트 속성을 추가해야 합니다. 웹 페이지에 매니페스트 속성이 포함되어 있지 않으면 브라우저는 해당 속성이 매니페스트 파일에 명시적으로 나열되어 있지 않은 한 페이지를 캐시하지 않습니다.
이는 사용자가 탐색하는 매니페스트가 포함된 모든 웹 페이지가 암시적으로 애플리케이션 캐시에 추가된다는 의미입니다. 따라서 인벤토리의 모든 페이지를 나열할 필요는 없습니다.
매니페스트 파일은 text/cache-manifest MIME 유형으로 제공되어야 합니다. 파일 접미사 이름은 사용자 정의할 수 있으므로(.manifest 권장) 서버 측에서 .manifest 접미사가 있는 파일 형식을 text/cache-manifest로 선언해야 합니다.
Apache를 예로 들면 다음을 추가해야 합니다. AddType text/cache-manifest .manifest를 httpd.conf에 추가해야 합니다.
매니페스트 파일 구조간단한 목록 형식은 다음과 같습니다.
캐시 매니페스트index.htmlstylesheet.cssimages/logo.pngscripts/main.js
이 예에서는 이 매니페스트 파일을 지정하는 웹 페이지에 4개의 파일을 캐시합니다.
다음 사항에 주의해야 합니다.
좀 더 복잡한 예를 살펴보겠습니다.
CACHE MANIFEST# 2010-06-18:v2# 명시적으로 캐시된 '마스터 항목'.CACHE:/favicon.icoindex.htmlstylesheet.cssimages/logo.pngscripts/main.js# 사용자가 온라인 상태여야 하는 리소스.NETWORK:로그인. php/myapihttp://api.twitter.com# main.py에 액세스할 수 없는 경우 static.html이 제공됩니다.# 오프라인.jpg가 제공됩니다. Images/large/# 오프라인.html의 모든 이미지 대신 제공됩니다. 다른 모든 .html 파일 대신 제공됩니다.FALLBACK:/main.py /static.htmlimages/large/images/offline.jpg*.html /offline.html
#으로 시작하는 줄은 주석 줄이지만 다른 목적으로도 사용될 수 있습니다. 예를 들어 캐시 업데이트
앱 캐시는 매니페스트 파일이 변경될 때만 업데이트됩니다. 예를 들어 이미지 리소스를 수정하거나 JavaScript 기능을 변경하는 경우 해당 변경 사항은 다시 캐시되지 않습니다. 브라우저가 캐시 파일을 새로 고칠 수 있도록 매니페스트 파일 자체를 수정해야 합니다. 생성된 버전 번호, 파일 해시 또는 타임스탬프가 포함된 주석 줄을 생성하면 사용자가 최신 버전의 소프트웨어를 사용할 수 있습니다.
캐시 업데이트 섹션에 설명된 대로 새 버전이 출시되면 프로그래밍 방식으로 캐시를 업데이트할 수도 있습니다.
페이지에 캐시 매니페스트 파일이 포함된 경우 매니페스트 파일에는 현재 페이지에 필요한 모든 파일(css, js, 이미지...)이 포함되어야 합니다. 그렇지 않으면 로드되지 않으므로 캐시해야 하는 파일은 제외됩니다. , 파일에 NETWORK를 추가하는 것이 좋습니다. 다른 모든 파일을 나타내려면 항목에 별표를 추가하세요.
매니페스트에는 CACHE, NETWORK 및 FALLBACK의 세 가지 섹션이 포함될 수 있습니다.
은닉처:이는 항목의 기본 부분입니다. 이 헤더 아래에 나열된 파일(또는 CACHE MANIFEST 바로 뒤에 있는 파일)은 처음 다운로드된 후 명시적으로 캐시됩니다.
회로망:이 섹션에 나열된 파일은 서버에 연결하는 데 필요한 화이트리스트 리소스입니다. 이러한 리소스에 대한 모든 요청은 사용자가 오프라인인지 여부에 관계없이 캐시를 우회합니다. 와일드카드를 사용할 수 있습니다.
대체:이 섹션은 선택 사항이며 리소스에 액세스할 수 없는 경우 대체 페이지를 지정합니다. 첫 번째 URI는 리소스를 나타내고 두 번째 URI는 지원 페이지를 나타냅니다. 두 URI는 서로 관련되어 있어야 하며 매니페스트 파일과 원본이 동일해야 합니다. 와일드카드를 사용할 수 있습니다.
참고: 섹션은 어떤 순서로든 정렬될 수 있으며 각 섹션은 동일한 목록에 반복적으로 나타날 수 있습니다.
다음 목록은 사용자가 사이트의 루트에 오프라인으로 액세스하려고 할 때 표시되는 포괄적인 웹 페이지(offline.html)를 정의하고 다른 모든 리소스(예: 원격 사이트의 리소스)에는 인터넷 연결이 필요함을 나타냅니다.
캐시 매니페스트# 2010-06-18:v3# 명시적으로 캐시된 항목index.htmlcss/style.css# 사용자가 오프라인인 경우 오프라인.html이 표시됩니다FALLBACK:/// /offline.html# 기타 모든 리소스(예: 사이트)에는 다음이 필요합니다. 사용자가 온라인 상태가 됩니다.NETWORK:*# 캐시CACHE에 대한 추가 리소스:images/logo1.pngimages/logo2.pngimages/logo3.png
참고: 매니페스트 파일을 참조하는 HTML 파일은 자동으로 캐시됩니다. 따라서 목록에 추가할 필요는 없지만 추가하는 것이 좋습니다.
참고: SSL을 통해 제공되는 페이지에 설정된 HTTP 캐시 헤더 및 캐시 제한은 캐시 매니페스트로 대체됩니다. 따라서 https를 통해 제공되는 웹페이지는 오프라인으로 실행될 수 있습니다.
캐시 업데이트다음 조건 중 하나가 발생하지 않는 한 앱은 오프라인 상태에서도 캐시된 상태로 유지됩니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.