HTML5新特性-离线存储

628 阅读2分钟

离线存储的使用

只需要页面头加一个manifest的属性

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>

cache.manifest文件格式如下

CACHE MANIFEST
#v0.11

CACHE:

js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

CACHE:表示要离线存储的资源列表,由于包含manifest文件的页面将自动被离线存储,所以不需要把页面列出来。

NETWORK:表示下面列表的资源只能在在线的情况下方问,不会被离线存储,CACHE优先级高于NETWORK,即若CACHE和NETWORK中有相同的资源,则该资源还是会被离线存储。

FALLBACK:表示如果访问第一个资源失败,那么就使用第二个资源来替换他,比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了,那么就去访问offline.html。

浏览器解析

在线情况下:对于头部有manifest属性的html,会请求manifest文件,若第一次方问app,则根据manifest文件下载相应的资源进行离线存储,否则浏览器会使用离线的资源加载页面,然后对比新的manifest和旧的manifest文件,若文件改变了,则重新下载文件中的资源并进行离线存储。

离线情况下:浏览器直接使用离线存储的资源加载页面。

注:

1、如果服务器对离线资源进行了更新,则必须更新manifest文件,否则更新的资源不会被浏览器重新下载。 2、manifest文件最好不要设置缓存,否则可能出现更新了manifest文件,但http缓存规则告诉浏览器manifest还没过期,会使用原来的manifest文件。 3、在下载manifest文件中的资源时,任意一个资源下载失败,这次的更新就算失败。 4、更新了资源后,新的资源在下次打开app时才会生效,如果需要资源马上生效,可以使用window.applicationCache.swapCache()方法来使之生效