HTML5 应用程序缓存初学者教程 HTML5 应用程序缓存 使用 HTML5，您可以通过创建 cachemanifest 文件轻松创建 Web 应用程序的离线版本。 什么是应用程序缓存（ApplicationCache）？ HTML5 引入了应用程序缓存，这意味着无需 Internet 连接即可缓存和访问 Web 应用程序。 应用程序缓存为应用程序带来了三个优势： 离线浏览 - 用户可以在离线时使用应用程序 速度 - 缓存的资源加载速度更快，减少服务器负载 - 浏览器只会从服务器下载更新或修改的资源。 浏览器支持 Internet Explorer 10、Firefox、Chrome 和 Safari 以支持应用程序缓存。 HTML5CacheManifest 示例 下面的示例显示了带有cachemanifest 的HTML 文档（用于离线浏览）： 示例文档内容 尝试一下吗？ CacheManifest 基础知识 要启用应用程序缓存，请在文档标记中包含清单属性：...指定清单的每个页面在用户访问时都会被缓存。 如果未指定manifest属性html页面缓存，则不会缓存该页面（除非直接在manifest文件中指定该页面）。
清单文件的建议文件扩展名是：“.appcache”。 请注意，清单文件需要配置正确的 MIME 类型，即“text/cache-manifest”。 必须在 Web 服务器上配置。 清单文件 清单文件是简单的文本文件，告诉浏览器要缓存什么（以及不缓存什么）。 清单文件可以分为三部分： CACHEMANIFEST - 该标题下列出的文件将在第一次下载后被缓存 NETWORK - 该标题下列出的文件需要连接到服务器，不会被缓存 FALLBACK - 该标题下的文件该标题指定当页面难以访问时（例如404页面）的后备页面。 CACHEMANIFEST CACHEMANIFEST 的第一行是必需的：manifest 在 CACHEMANIFEST/theme.css/logo.gif/main.js 文件中列出了三个资源：一个 CSS 文件、一个 GIF 图像和一个 JavaScript 文件。 当manifest文件加载时，浏览器会从网站根目录下载这三个文件。 此后，每当用户断开与 Internet 的连接时，该资源仍然可用。
NETWORK 下面的 NETWORK 小节指定文件“login.php”永远不会被缓存并且无法离线使用： NETWORK:login.php 可以使用星号来指示所有其他资源/文件需要 Internet 连接： NETWORK: The FALLBACK FALLBACK 下面小节规定，如果无法完成 Internet 连接，则 /html5/ 目录中的所有文件都将替换为“offline.html”： FALLBACK:/html//offline.html 注意：第一个 URI 是资源，第二个是替补。 更新缓存 一旦应用程序被缓存，它将保持缓存状态，直到发生以下情况：用户清除浏览器缓存并且清单文件发生更改（请参阅下面的提示）并且以编程方式更新应用程序缓存实例 - 完整的清单文件 CACHEMANIFEST #2012-02- 21v1.0.0/theme.css/logo.gif/main.jsNETWORK:login.phpFALLBACK:/html//offline.html 提示：以“#”开头的行是注释行，但也可以满足其他目的。 每当修改其清单文件时html页面缓存，应用程序的缓存就会更新。 如果您编辑图像或更改 JavaScript 函数，则不会重新缓存所做的更改。
更新注释行中的日期和版本号是让浏览器重新缓存文件的一种方法。 关于应用程序缓存的注意事项 请注意缓存的内容。 一旦文件被缓存，即使您在服务器上更改文件，浏览器也将继续显示缓存的版本。 为了保证浏览器更新缓存，需要更新manifest文件。 注意：浏览器对缓存数据的容量限制可能不同（各个浏览器设置的限制为每个站点 5MB）。
