全面回忆

张棣

离线Web应用

HTML5新增了“应用程序缓存”，允许应用程序将运行的所有文件（HTML、CSS、JavaScript、图片等）保存到用户的浏览器中。这种缓存方式不会随着用户清楚浏览器缓存而被清除，只有被用户“卸载”的时候，它们才会被删除，这种方式更像“存储”，而不是“缓存”。

清单文件

“本地安装”的目的就是保证我们的Web应用在离线状态下同样也能正常使用，同时有和App一样的秒开的效果。

实现应用程序缓存首选得有一个清单文件，包含了缓存资源的URL信息。同时需要在HTML的<html>标签设置manifest属性，指定清单文件

1
2
3
4
5
<!DOCTYPE html>
<html manifest="app.appcache">
<head></head>
<body></body>
</html>

清单文件首行内容以“CACHE MANIFEST”字符串开头，之后是资源URL信息，下面是一个简单的清单文件：

1
2
3
4
5
6
7
CACHE MANIFEST
# 我是注释，下面是URL信息
app.html
app.js
app.css
img/background.png

注意：清单文件MIME的类型必须是“text/cache-manifest，否则应用缓存失败。

一旦一个应用首次下载并缓存，之后的任何加载请求就都来自缓存，不会载入不在清单中的资源，因此应用的所有资源都得在清单中。

复杂清单文件

1
2
3
4
5
6
7
8
9
10
11
12
CACHE MANIFEST
CACHE:
app.html
app.js
app.css
FALLBACK:
video/ offline_help.html
NETWORK:
cgi/

“NETWORK:“表明这些资源都不缓存，通过网络加载，脚本多配置在该区域。这种配置和上面提到到资源必须在清单中是冲突的，在离线状态下，这部分资源就加载不了。

“FALLBACK:”每行包含两个URL，和”NETWORK:“一样，第一个URL也不会存储，而是通过网络加载，不同的是在离线状态下会使用第二个URL指定的资源代替，从缓存中获取。

缓存更新

Web应用从缓存中载入的时候，如果是在线状态，浏览器会异步检查清单文件的更新状态。注意只检查清单文件，如果服务端更新了一个JavaScript文件，那么要实现应用更新，必须得更新清单文件。浏览器更新完清单文件之后就会下载下来重新保存到缓存中去，同时伴随一些事件触发。

如果要实现“卸载”效果，就要在服务端删除清单文件，同时修改HTML文件以便他们与清单文件断开连接。

下面是浏览器几种更新场景：

  • 没有更新

浏览器会触发“noupdate”事件

  • 有更新

浏览器先触发“downloading”事件，下载资源，同时触发“process”事件，下载完成之后，触发“updateready”事件。

  • 首次载入应用

首次载入应用，和有更新状态一样，只是最后资源下载完成之后触发“cache”事件，而不是“updateready”事件。

  • 离线状态

浏览器无法检查清单文件，会触发“error”事件。

  • 清单文件不存在

浏览器处于在线状态，并且应用已经缓存完成，如果清单文件不存在，会触发“obslote”事件，并将应用从缓存中移除。

注意：上述事件都需要注册在window.applicationCache这个对象上，支持离线缓存的浏览器都会定义该属性。