HTML5 애플리케이션 캐시
- 이전 페이지 HTML5 웹 스토리지
- 다음 페이지 HTML5 웹 워크어
애플리케이션 캐시를 사용하여 cache manifest 파일을 생성하여 웹 애플리케이션의 오프라인 버전을 쉽게 생성할 수 있습니다.
애플리케이션 캐시는 무엇인가요?
HTML5는 애플리케이션 캐시(Application Cache)를 도입했습니다. 이는 웹 애플리케이션을 캐시에 저장할 수 있으며, 인터넷 연결이 없을 때도 접근할 수 있습니다.
애플리케이션 캐시는 앱에 세 가지 이점을 제공합니다:
- 오프라인 브라우징 - 사용자는 앱이 오프라인 상태일 때도 사용할 수 있습니다
- 속도 - 캐시된 리소스는 더 빠르게 로드됩니다
- 서버 부하를 줄이기 - 브라우저는 업데이트되거나 변경된 리소스만 서버에서 다운로드합니다
浏览器支持
表格中的数字指示完全支持应用程序缓存的首个浏览器版本。
| API | |||||
| Application Cache | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML Cache Manifest 实例
下例展示了带有 cache manifest 的 HTML 文档（供离线浏览）：
实例
!DOCTYPE HTML <html manifest="demo.appcache"> <body> 文档内容 ...... </body> </html>
Cache Manifest 基础
如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性：
!DOCTYPE HTML <html manifest="demo.appcache"> ... </html>
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议文件扩展名是：".appcache"。
注意：manifest 文件需要设置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
Manifest 文件
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件有三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
CACHE MANIFEST
第一行，CACHE MANIFEST，是必需的：
CACHE MANIFEST /theme.css /logo.gif /main.js
上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件被加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然可用。
NETWORK
下面的 NETWORK 部分，文件 "login.php" 永远不会被缓存，并且离线时不可用：
NETWORK: login.asp
스타일(*)를 사용하여 모든 다른 자원/파일이 인터넷 연결이 필요하다는 것을 지시할 수 있습니다:
NETWORK: * FALLBACK
아래의 FALLBACK 부분은 인터넷 연결을 수립할 수 없으면 /html/ 디렉토리에 있는 모든 파일을 "offline.html"로 대체하도록 정의합니다:
FALLBACK: /html/ /offline.html
주의사항:첫 번째 URI는 자원이고, 두 번째는 대체입니다.
캐시 업데이트
애플리케이션이 캐시되면, 다음 중 하나가 발생할 때까지 캐시 상태를 유지합니다:
- 사용자가 브라우저 캐시를 비우면
- manifest 파일이 수정되었습니다. 아래의 팁을 참조하세요.
- 프로그램으로 애플리케이션 캐시 업데이트
예제 - 완전한 Cache Manifest 파일
CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html/ /offline.html
추천:"#"로 시작하는 것은 주석 행입니다만, 다른 용도에도 사용될 수 있습니다. 애플리케이션의 캐시는 manifest 파일이 변경될 때만 업데이트됩니다. 이미지를 편집하거나 JavaScript 함수를 수정하면 이러한 변경 사항은 다시 캐시되지 않습니다. 주석 행의 날짜와 버전 번호를 업데이트하는 것은 브라우저가 파일을 다시 캐시하는 방법 중 하나입니다.
애플리케이션 캐시에 대한 주의사항
캐시 내용을 주의하세요.
파일이 캐시에 저장되면, 브라우저는 서버에서 파일을 수정했는지라도 이미 저장된 버전을 계속 표시합니다. 브라우저가 캐시를 업데이트하려면 manifest 파일을 업데이트해야 합니다.
주의사항:브라우저가 캐시 데이터의 용량 제한이 다를 수 있습니다. (일부 브라우저의 제한은 각 사이트당 5MB입니다).
- 이전 페이지 HTML5 웹 스토리지
- 다음 페이지 HTML5 웹 워크어
