html5离线缓存机制--manifest

manifest:是web应用的一种缓存机制，当用户访问页面时，浏览器可以将我们规定的文件缓存下来，用于在没有网络的时候也能访问。
1、manifest文件
manifest是一种文本文件，它的扩展名可以是任意名字。文件内容主要是我们需要缓存的文件资源，一旦打开网站，浏览器将会自动进行缓存。
2、manifest工作流程。

在浏览器中存在一个APP cache,用来存储缓存文件。当浏览页面时会首先访问浏览器是否有APP cache，如果有，它会将我们规定的文件资源缓存下来返回给用户，同时检测server上的manifest文件是否有更新，如果有更新，则会把manifest上的文件重新拉取一遍，之后更新APP cache。如果没有更改，直接结束。如下图：

3、使用方法
在html标签中增添manifest属性，用来指定当前页面的manifest文件。例如：
页面为index.html：
<html manifest='index.manifest'>
注意项:
1、扩展名可以任意
2、可以使用相对路径也可以使用绝对路径，绝对路径要注意如服务器路径符合。
3、mine-type必须是text/cache-manifest,在服务器上部署的时候需要添加相应的mie-type
4、文件内容

manifest文件结构如下图：

html5离线缓存机制--manifest

（1）、CACHE MAIFEST是必须添加的。
（2）、CACHE:(必写)
下面是列出需要缓存的文件，可以是绝对路径也可以是相对路径。
（3）、NETWORK:（可写）
是列出绕过缓存直接读取的文件，一般使用通配符*，表示除CACHE中列出的文件其他文件必须联网访问。
（4）、FALLBACK：（可写）
当资源无法访问时，使用其他资源代替。两个 URL都必须使用相对路径并且与清单文件同源。可以使用通配符。
例如：
FALLBACK:
/index.html /404.html
或者
FALLBACK:
/*.html /404.html
5、如何更新缓存
（1）、更新manifest文件。
通过修改manifest文件可以更新缓存，但是如果我们没有修改manifest只是修改了需要缓存文件的内容，此时可以更改版本号。此时需要刷新页面两次才能拿到新的资源，第一次是更新APP cache,第二次是更新用户界面。
（2）、js控制
js操作离线缓存：
window.appcationCache.update() //手动进行更新缓存
完整实例：此实例可以避免两次下载的麻烦
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
console.log('Manifest didn't changed. Nothing new to server.')
}
}, false);
（3）、清除浏览器缓存

html5离线缓存机制--manifest

相关推荐