html5的离线缓存如何使用

这篇文章主要介绍“html5的离线缓存如何使用”，在日常操作中，相信很多人在html5的离线缓存如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”html5的离线缓存如何使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

　　离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制，但它们并不可靠，也不一定总能起到预期的作用。HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题。

　　使用缓存接口可为您的应用带来以下三个优势：

　　应用缓存（又称 AppCache）可让开发人员指定浏览器应缓存哪些文件以供离线用户访问。即使用户在离线状态下按了刷新按钮，您的应用也会正常加载和运行。

　　引用清单文件

　　要启用某个应用的应用缓存，请在文档的 html 标记中添加 manifest 属性：

　　manifest 属性可指向绝对网址或相对路径，但绝对网址必须与相应的网络应用同源。清单文件可使用任何文件扩展名，但必须以正确的 MIME 类型提供（参见下文）。

　　您应在要缓存的网络应用的每个页面上都添加 manifest 属性。如果网页不包含 manifest 属性，浏览器就不会缓存该网页（除非清单文件中明确列出了该属性）。

　　这就意味着用户浏览的每个包含 manifest 的网页都会隐式添加到应用缓存。因此，您无需在清单中列出每个网页。

　　清单文件必须以 text/cache-manifest MIME类型提供。文件后缀名可以自定义（建议为。manifest）所以我们需要现在服务端将后缀的文件类型声明为text/cache-manifest。

　　以apache为例，我们需要在httpd.conf中加上：

　　清单文件结构

　　简单的清单格式如下：

　　该示例将在指定此清单文件的网页上缓存四个文件。

　　您需要注意以下几点：

　　CACHE MANIFEST 字符串应在第一行，且必不可少。

　　网站的缓存数据量不得超过 5 MB。不过，如果您要编写的是针对 Chrome 网上应用店的应用，可使用 unlimitedStorage 取消该限制。

　　如果清单文件或其中指定的资源无法下载，就无法进行整个缓存更新进程。在这种情况下，浏览器将继续使用原应用缓存。

　　我们再来看看更复杂的示例：

　　以“#”开头的行是注释行，但也可用于其他用途。例如更新缓存

　　应用缓存只在其清单文件发生更改时才会更新。例如，如果您修改了图片资源或更改了 JavaScript 函数，这些更改不会重新缓存。您必须修改清单文件本身才能让浏览器刷新缓存文件。使用生成的版本号、文件哈希值或时间戳创建注释行，可确保用户获得您的软件的最新版。

　　您还可以在出现新版本后，以编程方式更新缓存，如更新缓存部分中所述。

　　如果页面引入了缓存清单文件，那么清单文件必须包含当前页面需要的所有文件（css，js，image…），否则不会被加载，所以除去固定需要缓存的文件，建议在文件中的NETWORK一项加上星号*,表示其余所有文件

　　清单可包括以下三个不同部分：CACHE、NETWORK 和 FALLBACK。

　　CACHE：

　　这是条目的默认部分。系统会在首次下载此标头下列出的文件（或紧跟在 CACHE MANIFEST 后的文件）后显式缓存这些文件。

　　NETWORK：

　　此部分下列出的文件是需要连接到服务器的白名单资源。无论用户是否处于离线状态，对这些资源的所有请求都会绕过缓存。可使用通配符。

　　FALLBACK：

　　此部分是可选的，用于指定无法访问资源时的后备网页。其中第一个 URI 代表资源，第二个代表后备网页。两个 URI 必须相关，并且必须与清单文件同源。可使用通配符。

　　请注意：这些部分可按任意顺序排列，且每个部分均可在同一清单中重复出现。

　　以下清单定义了用户尝试离线访问网站的根时显示的“综合性”网页 （offline.html），也表明了其他所有资源（例如远程网站上的资源）均需要互联网连接。

　　请注意：系统会自动缓存引用清单文件的 HTML 文件。因此您无需将其添加到清单中，但我们建议您这样做。

　　请注意：HTTP 缓存标头以及对通过 SSL 提供的网页设置的缓存限制将被替换为缓存清单。因此，通过 https 提供的网页可实现离线运行。

　　更新缓存

到此，关于“html5的离线缓存如何使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！