Home / Blog / it

HTML5 application cache笔记

Author: Vic.Wang 2016/09/30 Tags:applicationcachehtml5memory离线存储

application cache 缓存应用文件的一种方案, 它可以本整个网页需要的资源文件(包括html)缓存在本地,当没有网络或者网络情况较差的时候,则使用本地的缓存文件来运行,使用方式也较为便利。

配置manifest文件:

    CACHE MANIFEST//必须以这个开头
    version 1.0 //最好定义版本,更新的时候只需修改版本号
    CACHE:    //定义需要缓存的文件
        m.png
        test.js
        test.css
    NETWORK:  //此部分下列出的文件是需要连接到服务器的白名单资源。无论用户是否处于离线状态,对这些资源的所有请求都会绕过缓存。可使用通配符。
    *
    FALLBACK
    404.html, 500.html   //,用于指定无法访问资源时的后备网页。其中第一个 URI 代表资源,第二个代表后备网页。两个 URI 必须相关,并且必须与清单文件同源。可使用通配符。
                    

在html中设置缓存:

    <html manifest="test.manifest">

    </html>
                    

在服务器上设置 manifest 的 MIME-TYPE:

    <mime-mapping>
        <extension>manifest</extension>
        <mime-type>text/cache-manifest</mime-type>
    </mime-mapping>