HTML5 之 离线缓存

HTML5的离线缓存又被称为应用缓存（application cache），为专门开发web离线应用而设计的，使web应用在离线的情况下仍能正常显示页面。虽然离线状态下不能进行一些和服务器的交互操作，但是缓存页面可加快下次访问的速度，减少下次访问时的服务请求，减轻服务器的压力。

Appcache是从浏览器的缓存中划分出一块空间，使用manifest描述文件列出想要缓存的资源，将资源缓存到该空间。

例如：下面是个最简单的例子，只要求缓存了一个js文件和一张背景图片。

CACHE MANIFEST
#comment

js/index.js
img/bg.png

要想将htm文件和描述文件关联起来可以在<html>标签使用manifest属性，来指定manifest文件的路径。

<html lang="en" manifest="demo.appcache">

manifest文件的结构：

• CACHE MANIFEST （必选）                     标识出哪些文件需要缓存
• NETWORK （可选）                                   标识要绕过缓存直接从服务器读取的文件（不会被缓存，离线时不可用）
• FALLBACK（可选）                                    标识当资源无法访问时，浏览器使用的备用页面（例如404页面）,类似于键值对

那么，浏览器是如何对缓存资源进行管理和加载的呢？

在线状态下，浏览器发现html标签里面如果有manifest属性，它首先会请求manifest文件，如果浏览器是第一次请求该页面，则会按照manifest文件里的清单缓存相应的资源。如果浏览器已经访问过该页面，并且缓存过相应的资源，那么浏览器就会先加载缓存过的离线资源，然后浏览器会请求新的manifest文件与旧的manifest文件作对比，如果发生改变，浏览器则会重新下载manifest文件中的资源。

下面是个简单的例子：

<!DOCTYPE html>
<html lang="en" manifest="demo.appcache">
<head>
    <meta charset="UTF-8">
    <title>HTML5应用缓存</title>
</head>
<body>
    <img src="img/01.jpg" alt="cat">
    <img src="img/02.jpg" alt="rabbit">
</body>
</html>

CACHE MANIFEST
#First ----------- 注释、描述
img/01.jpg

NETWORK:
*

FALLBACK:
*.html /404.html

将项目放进tomcat，打开服务器，通过localhost:8080访问，控制台输出如下：

页面正常显示两个图片。当关掉服务器后再次访问：

（从appcache中加载文档......）第二张图片无法正常显示。

再次打开服务器，刷新页面：

application cache有个对象的JavaScript API能让我们知道它的状态。

applicationCache对象，有个status属性，表示应用缓存当前的状态。

0：无与页面相关的缓存

1：闲置，缓存未更新

2：检查中，正在下载描述文件并检查更新

3：下载中，正在下载描述文件中列出的缓存清单

4：更新完成，可通过swapCache（）来使用

5：废弃，应用缓存的描述文件已经不存在，该页面无法再访问应用缓存

相关事件：

• checking：在浏览器为应用缓存查找更新时触发
• error：在检查更新或下载资源期间发生错误时触发
• noupdate：在检查描述文件发现文件无变化时触发
• downloading：在开始下载应用缓存资源时触发
• progress：在下载应用缓存资源时不断地触发
• updateready：在新的应用缓存下载完毕后可通过swapCache( )使用时触发
• cached：应用缓存完整可用时触发

相关事件在上述例子中已有所体现。

该图片引自  https://blog.youkuaiyun.com/dj0379/article/details/53350309#commentBox