HTML5 매니페스트 오프라인 캐싱을 위한 샘플 코드
- 青灯夜游앞으로
- 2018-10-09 16:14:492282검색
네트워크 기반 애플리케이션에서는 오프라인 액세스가 점점 더 중요해지고 있습니다. 이 기사에서는 HTML5 매니페스트 오프라인 캐싱의 샘플 코드에 대한 관련 정보를 주로 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 도움이 되세요.
소개
웹 기반 애플리케이션에서는 오프라인 액세스가 점점 더 중요해지고 있습니다. 모든 브라우저에는 캐싱 메커니즘이 있지만 신뢰할 수 없으며 항상 예상대로 작동하지 않을 수도 있습니다. HTML5는 오프라인으로 인해 발생하는 일부 문제를 해결하기 위해 ApplicationCache 인터페이스를 사용합니다.
캐시 인터페이스를 사용하면 애플리케이션에 다음 세 가지 이점을 가져올 수 있습니다.
오프라인 검색 - 사용자는 오프라인에서도 전체 웹 사이트를 검색할 수 있습니다.
속도 - 캐시된 리소스는 로컬 리소스이므로 로딩 속도는 천천히 빨리.
서버 부하 감소 - 브라우저는 변경된 서버에서만 리소스를 다운로드합니다.
App Cache(AppCache라고도 함)를 사용하면 개발자는 오프라인 사용자가 액세스할 수 있도록 브라우저가 캐시해야 하는 파일을 지정할 수 있습니다. 사용자가 오프라인 상태에서 새로 고침 버튼을 눌러도 앱은 정상적으로 로드되고 실행됩니다.
매니페스트 파일을 참조하세요
애플리케이션에 대한 애플리케이션 캐싱을 활성화하려면 문서의 html 태그에 매니페스트 속성을 추가하세요.
매니페스트 속성은 절대 URL이나 상대 경로를 가리킬 수 있지만 절대 경로는 URL은 동일한 소스에서 나온 해당 네트워크 애플리케이션과 일치해야 합니다. 매니페스트 파일은 모든 파일 확장자를 사용할 수 있지만 올바른 MIME 유형으로 제공되어야 합니다(아래 참조).
<html manifest="/cache.manifest"> ... </html>
또는
<html manifest="http://www.example.com/example.mf"> ... </html>
캐시하려는 웹 앱의 모든 페이지에 매니페스트 속성을 추가해야 합니다. 웹 페이지에 매니페스트 속성이 포함되어 있지 않으면 브라우저는 해당 속성이 매니페스트 파일에 명시적으로 나열되어 있지 않은 한 페이지를 캐시하지 않습니다.
즉, 매니페스트가 포함된 사용자가 탐색하는 모든 웹 페이지가 암시적으로 애플리케이션 캐시에 추가된다는 의미입니다. 따라서 인벤토리의 모든 페이지를 나열할 필요는 없습니다.
매니페스트 파일은 text/cache-manifest MIME 유형으로 제공되어야 합니다. 파일 접미사 이름은 사용자 정의할 수 있으므로(.manifest 권장) 서버 측에서 .manifest 접미사가 있는 파일 형식을 text/cache-manifest로 선언해야 합니다.
아파치를 예로 들어, httpd.conf에 다음을 추가해야 합니다: AddType text/cache-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, NETWORK 및 FALLBACK의 세 가지 다른 부분이 포함될 수 있습니다.
CACHE:이 항목의 기본 부분입니다. 이 헤더 아래에 나열된 파일(또는 CACHE MANIFEST 바로 다음 파일)은 처음 다운로드될 때 명시적으로 캐시됩니다.
이 섹션에 나열된 파일은 서버에 연결해야 하는 허용된 리소스입니다. 이러한 리소스에 대한 모든 요청은 사용자가 오프라인인지 여부에 관계없이 캐시를 우회합니다. 와일드카드를 사용할 수 있습니다.
이 섹션은 선택 사항이며 리소스에 액세스할 수 없을 때 대체 웹 페이지를 지정하는 데 사용됩니다. 첫 번째 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 文件。因此您无需将其添加到清单中，但我们建议您这样做。
请注意：HTTP 缓存标头以及对通过 SSL 提供的网页设置的缓存限制将被替换为缓存清单。因此，通过 https 提供的网页可实现离线运行。
更新缓存
应用在离线后将保持缓存状态，除非发生以下某种情况：
用户清除了浏览器对您网站的数据存储。
清单文件经过修改。请注意：更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。
应用缓存通过编程方式进行更新。
总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问Html5视频教程！
相关推荐：
위 내용은 HTML5 매니페스트 오프라인 캐싱을 위한 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!