HTML5 的 applicationCache 应用程序缓存离线存储功能与 manifest 文件

2013-08-02 2 条评论 13,847 次阅读 被赞了 1 次
目录
[隐藏]

HTML5 离线应用的实现少不了这个功能的支持，通过 manifest 文件配置，可以很方便的设置哪些文件可以和不可以被缓存。

加注： applicationCache API 由于问题较多，当前已不再建议使用，该标准也已被废弃。可以使用 service Worker 来代替相关需求的实现。

一. 实现 HTML5 applicationCache 的步骤

一般的操作步骤

  1. 新建 manifest 文件

如文件名为  lzwme.manifest，内容配置参考如下：

CACHE MANIFEST

# version 1.2  for update cop help

# 直接缓存的文件
CACHE:
    /wp-content/themes/weisayheibai/images/meta_author.png
    /wp-content/themes/weisayheibai/images/meta_date.png
    /wp-content/themes/weisayheibai/images/meta_categories.png
    /wp-content/themes/weisayheibai/images/meta_comments.png
    /wp-content/themes/weisayheibai/images/meta_views.png
    /wp-content/themes/weisayheibai/images/new.gif
    /wp-content/themes/weisayheibai/images/random/tb1.jpg
    /wp-content/themes/weisayheibai/images/random/tb2.jpg
    /wp-content/themes/weisayheibai/images/random/tb3.jpg
    /wp-content/themes/weisayheibai/images/random/tb4.jpg
    /wp-content/themes/weisayheibai/images/random/tb5.jpg
    /wp-content/themes/weisayheibai/images/random/tb6.jpg
    /wp-content/themes/weisayheibai/images/random/tb7.jpg
    /wp-content/themes/weisayheibai/images/random/tb8.jpg
    /wp-content/themes/weisayheibai/images/random/tb9.jpg
    /wp-content/themes/weisayheibai/images/random/tb10.jpg
    /wp-content/themes/weisayheibai/images/random/tb11.jpg
    /wp-content/themes/weisayheibai/images/random/tb12.jpg
    /wp-content/themes/weisayheibai/images/random/tb13.jpg
    /wp-content/themes/weisayheibai/images/random/tb14.jpg
    /wp-content/themes/weisayheibai/images/random/tb15.jpg
    /plugins/jquerylazyload/fill.gif
    /wp-includes/images/smilies/icon_question.gif
    /wp-includes/images/smilies/icon_razz.gif
    /wp-includes/images/smilies/icon_sad.gif
    /wp-includes/images/smilies/icon_evil.gif
    /wp-includes/images/smilies/icon_exclaim.gif
    /wp-includes/images/smilies/icon_smile.gif
    /wp-includes/images/smilies/icon_redface.gif
    /wp-includes/images/smilies/icon_biggrin.gif
    /wp-includes/images/smilies/icon_surprised.gif
    /wp-includes/images/smilies/icon_eek.gif
    /wp-includes/images/smilies/icon_confused.gif
    /wp-includes/images/smilies/icon_cool.gif
    /wp-includes/images/smilies/icon_lol.gif
    /wp-includes/images/smilies/icon_mad.gif
    /wp-includes/images/smilies/icon_twisted.gif
    /wp-includes/images/smilies/icon_rolleyes.gif
    /wp-includes/images/smilies/icon_wink.gif
    /wp-includes/images/smilies/icon_idea.gif
    /wp-includes/images/smilies/icon_arrow.gif
    /wp-includes/images/smilies/icon_neutral.gif
    /wp-includes/images/smilies/icon_cry.gif
    /wp-includes/images/smilies/icon_mrgreen.gif

    /wp-content/themes/weisayheibai/style.css
    /wp-content/plugins/syntax-highlighter-with-add-button-in-editor/styles/shCoreDefault.css

    /wp-content/themes/weisayheibai/js/jquery.min.js
    /wp-content/themes/weisayheibai/js/hoveraccordion.js
    /wp-content/themes/weisayheibai/js/custom.js
    /wp-content/plugins/syntax-highlighter-with-add-button-in-editor/scripts/shCore.js
    /wp-content/plugins/syntax-highlighter-with-add-button-in-editor/scripts/shAutoloader.js

# 需要在时间在线的文件
NETWORK:
    /
# 替代方案
FALLBACK:

清单可包括以下三个不同部分：CACHE、NETWORK 和 FALLBACK。

CACHE：
这是条目的默认部分。系统会在首次下载此标头下列出的文件（或紧跟在 CACHE MANIFEST 后的文件）后显式缓存这些文件。

NETWORK：
此部分下列出的文件是需要连接到服务器的白名单资源。无论用户是否处于离线状态，对这些资源的所有请求都会绕过缓存。可使用通配符。

FALLBACK：
此部分是可选的，用于指定无法访问资源时的后备网页。其中第一个 URI 代表资源，第二个代表后备网页。两个 URI 必须相关，并且必须与清单文件同源。可使用通配符。
请注意：这些部分可按任意顺序排列，且每个部分均可在同一清单中重复出现。

注意：

A. CACHE MANIFEST 字符串应在第一行，且必不可少
B. 并不支持模糊或正则匹配，添加的文件路径一般应是可以访问的静态文件
C. 如果页面中有静态文件增加，也应该在 CACHE 的列表中添加；
D. 应保持 NETWORK 为 * ，以防止当前页面被缓存了，但未添加至 CACHE 列表的静态文件不从服务器加载，从而出现无法访问到的问题。（测试使用中发现的现象）

  1. 在需要缓存的页面中加入该文件导入配置，示例：
cache.html

<!DOCTYPE html> 
<html manifest="zinhelp.manifest"> 
<head> 
    <meta charset=utf-8> 
    <title>cache</title> 
    <script>
        //发生了状态变化，则执行更新，一般来说本操作并不需要，因为当 manifest 文件变化时会发生 onnoupdate 事件，浏览器会自动更新缓存文件
        if(window.applicationCache && window.applicationCache.status == UPDATEREADY){
             window.applicationCache.update();
        }
    </script>
</head>
<body> 
    HTML5 cache!
</body> 
</html>
  1. 配置服务器的 manifest 格式扩展名文件支持

在 Web 服务器配置中添加如下 MIME 映射：

扩展名为 manifest，类型为 text/cache-manifest

注：
该设置是为了防止在不支持 applicationCache 功能的浏览器上浏览时，浏览器不知道该文件的格式而可能造成作为附件下载。
在支持 HTML5 该功能的浏览器上，一般可以正确的对该文件识别并判断，并不需要服务器强制解析该文件类型。

二. 注意的问题

1. 关于文件的更新

只有当 .manifest 文件变动，缓存文件才会重新更新并缓存。所以动态页面是不宜缓存的。而且当浏览器检测到该文件发生了更新时，会触发一系列事件监听函数，并异步地更新缓存，而当前页显示的依然是历史缓存内容，所以在此刷新时才能浏览最新的内容。

 1. 缓存当前页问题

一般我们只需要对不更新或很少更新的文件进行缓存，对于动态更新的页面是不提倡缓存的。
对于加载 manifest 的当前页面，浏览器会默认缓存，这会造成一个问题：
如果当前页为动态更新的页面，那么如果 manifest 文件不更新，则当面页面也就会一直被缓存，那么页面的动态更新就无法获知了。

这在HTML5 相关文档里并没有直接的解决方案，其解释是这是必须而安全的。
如果我们只是想通过当前缓存静态文件，那么我们该如何处理该问题呢？

一个可行的解决方法是添加 iframe ，那么 iframe 会一直缓存（直到 manifest 变化后更新），当前页则一直是动态的。

2. 大小限制问题

浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）
这一点并没有在多浏览器上作严格测试，对于 HTML5 的 本地存储 localStorage 大小限制的测试可参考这里：

HTML5 本地存储 localStorage：
http://lzw.me/Category/tech/html5-localstorage.html

不过，如果你编写的是针对 Chrome 网上应用店的应用，可使用 unlimitedStorage 取消该限制。

三. 相关状态监控函数参考

当浏览器检测到 .manifest 文件发生变动时，浏览器会异步的对缓存文件更新，而当前显示的依然是历史缓存内容，那么需要再次刷新才能浏览到最新的页面。但是浏览器会触发事件监听函数，我们可以通过这些事件监听函数进行适当的应用处理。
当前 HTML5 的 applicationCache 支持的监听函数有如下几种，适当的定义这些函数即可对离线应用的更新流程及应用的处理进行控制。

// 定义离线缓存的事件监听
function deAppCacheHandler(){
    if(! applicationCache ) return;

    //信息提示
    function msgTips(msg){
        $('.longMsg .label-info').html(msg);
        console.log(msg);
    }

    applicationCache.onchecking = function(){
        //检查manifest文件是否存在
        msgTips('正在检测离线缓存配置...');
        //return false;
    };

    applicationCache.ondownloading = function(){
        //检查到有manifest或者manifest文件
        //已更新就执行下载操作
        //即使需要缓存的文件在请求时服务器已经返回过了
        msgTips('本地缓存正在更新中...');
        window.precesscount = 0; //用于进度计算
        return false;
    };

    applicationCache.onnoupdate = function(){
        //返回304表示没有更新，通知浏览器直接使用本地文件
        msgTips('您使用的是最新版本');
        setTimeout(function(){
            msgTips('');
        }, 5000);
        return false;
    };

    applicationCache.onprogress = function(e){
        //下载的时候周期性的触发，可以通过它
        //获取已经下载的文件个数
        var precess = '';
        if(e & e.lengthComputable){
            precess = ' ' + Math.round(100 * e.loaded / e.total) + '%'
        }else{
            window.precesscount += 1;
            precess = '(' + window.precesscount + ')';
        }
        msgTips('本地缓存正在更新中... ' + precess);
        return false;
    };

    applicationCache.oncached = function(){
        //下载结束后触发，表示缓存成功
        msgTips('全部离线内容缓存成功！');
        return false;
    };

    applicationCache.onupdateready = function(){
        //第二次载入，如果manifest被更新
        //在下载结束时候触发
        //不触发onchched
        /*/alert("本地缓存正在更新中。。。");
        if(confirm("是否重新载入已更新的文件？")){
           applicationCache.swapCache();//弃用旧的缓存文件
           location.reload();
        }//*/
        msgTips('已有新版本，请刷新页面载入');
        applicationCache.swapCache();//弃用旧的缓存文件
        return false;
    };

    applicationCache.onobsolete = function(){
        //未找到文件，返回404或者401时候触发
        msgTips('离线缓存功能已删除');
        return false;
    };

    applicationCache.onerror = function(){
        //其他和离线存储有关的错误
        msgTips('无法访问离线配置文件');
        return false;
    };

    window.onoffline = function(){
        msgTips('离线状态');
        return false;
    };
}

相关文章:

Default ThumbnailHTML5 FormData 与无刷新文件上传 Default ThumbnailHTML5 Canvas 应用示例：简易画板 Default ThumbnailHTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理 HTML5 活动宣传页「My Flyme 独家记忆」开发实践总结 Default Thumbnail参加html5年会：HTML5 年度HomeParty暨首届原创游戏大赛颁奖典礼 Default ThumbnailHTML5 postMessage 消息传输与 POST 跨域通信 网站渐进式增强体验(PWA)改造：Service Worker 应用详解 Default ThumbnailH5 活动页之移动端 REM 布局适配方法 Default Thumbnailgrunt 快速入门：使用 grunt 自动化构建工具进行前端开发 Default Thumbnailvscode: Visual Studio Code 常用快捷键及前端开发常用插件
点赞 (1)
知识共享许可协议
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
  1. Pingback： 网站渐进式增强体验(PWA)改造：Service Worker 应用详解 - 志文工作室
  2. prudence说道：
    2015年03月9日 5:56 下午
    Google Chrome 40.0.2214.94 Google Chrome 40.0.2214.94 Windows 7 x64 Edition Windows 7 x64 Edition

    chrome中缓存的图片如果更改的话，刷新浏览器，仍然使用缓存的图片，这怎么办？

    回复
    1. 任侠说道：
      2015年03月18日 2:42 下午
      Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Windows 7 x64 Edition Windows 7 x64 Edition

      写的很清楚，manifest 文件有改动，才会重新缓存。所以缓存资源有更新，则改动一下 manifest 文件内容即可

      回复
  3. Pingback： HTML5 的 applicationCache 应用程序缓存离线存储功能与 manifest 文件 | Wordpress公社演示站

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code