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

    一. 实现 HTML5 applicationCache 的步骤

    一般的操作步骤

    1. 新建 manifest 文件

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

    01 CACHE MANIFEST
    02  
    03 # version 1.2  for update cop help
    04  
    05 # 直接缓存的文件
    06 CACHE:
    07     /wp-content/themes/weisayheibai/images/meta_author.png
    08     /wp-content/themes/weisayheibai/images/meta_date.png
    09     /wp-content/themes/weisayheibai/images/meta_categories.png
    10     /wp-content/themes/weisayheibai/images/meta_comments.png
    11     /wp-content/themes/weisayheibai/images/meta_views.png
    12     /wp-content/themes/weisayheibai/images/new.gif
    13     /wp-content/themes/weisayheibai/images/random/tb1.jpg
    14     /wp-content/themes/weisayheibai/images/random/tb2.jpg
    15     /wp-content/themes/weisayheibai/images/random/tb3.jpg
    16     /wp-content/themes/weisayheibai/images/random/tb4.jpg
    17     /wp-content/themes/weisayheibai/images/random/tb5.jpg
    18     /wp-content/themes/weisayheibai/images/random/tb6.jpg
    19     /wp-content/themes/weisayheibai/images/random/tb7.jpg
    20     /wp-content/themes/weisayheibai/images/random/tb8.jpg
    21     /wp-content/themes/weisayheibai/images/random/tb9.jpg
    22     /wp-content/themes/weisayheibai/images/random/tb10.jpg
    23     /wp-content/themes/weisayheibai/images/random/tb11.jpg
    24     /wp-content/themes/weisayheibai/images/random/tb12.jpg
    25     /wp-content/themes/weisayheibai/images/random/tb13.jpg
    26     /wp-content/themes/weisayheibai/images/random/tb14.jpg
    27     /wp-content/themes/weisayheibai/images/random/tb15.jpg
    28     /plugins/jquerylazyload/fill.gif
    29     /wp-includes/images/smilies/icon_question.gif
    30     /wp-includes/images/smilies/icon_razz.gif
    31     /wp-includes/images/smilies/icon_sad.gif
    32     /wp-includes/images/smilies/icon_evil.gif
    33     /wp-includes/images/smilies/icon_exclaim.gif
    34     /wp-includes/images/smilies/icon_smile.gif
    35     /wp-includes/images/smilies/icon_redface.gif
    36     /wp-includes/images/smilies/icon_biggrin.gif
    37     /wp-includes/images/smilies/icon_surprised.gif
    38     /wp-includes/images/smilies/icon_eek.gif
    39     /wp-includes/images/smilies/icon_confused.gif
    40     /wp-includes/images/smilies/icon_cool.gif
    41     /wp-includes/images/smilies/icon_lol.gif
    42     /wp-includes/images/smilies/icon_mad.gif
    43     /wp-includes/images/smilies/icon_twisted.gif
    44     /wp-includes/images/smilies/icon_rolleyes.gif
    45     /wp-includes/images/smilies/icon_wink.gif
    46     /wp-includes/images/smilies/icon_idea.gif
    47     /wp-includes/images/smilies/icon_arrow.gif
    48     /wp-includes/images/smilies/icon_neutral.gif
    49     /wp-includes/images/smilies/icon_cry.gif
    50     /wp-includes/images/smilies/icon_mrgreen.gif
    51  
    52     /wp-content/themes/weisayheibai/style.css
    53     /wp-content/plugins/syntax-highlighter-with-add-button-in-editor/styles/shCoreDefault.css
    54  
    55     /wp-content/themes/weisayheibai/js/jquery.min.js
    56     /wp-content/themes/weisayheibai/js/hoveraccordion.js
    57     /wp-content/themes/weisayheibai/js/custom.js
    58     /wp-content/plugins/syntax-highlighter-with-add-button-in-editor/scripts/shCore.js
    59     /wp-content/plugins/syntax-highlighter-with-add-button-in-editor/scripts/shAutoloader.js
    60  
    61 # 需要在时间在线的文件
    62 NETWORK:
    63     /
    64 # 替代方案
    65 FALLBACK:

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

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

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

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

    注意：

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

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

    01 cache.html
    02  
    03 <!DOCTYPE html>
    04 <html manifest="zinhelp.manifest">
    05 <head>
    06     <meta charset=utf-8>
    07     <title>cache</title>
    08     <script>
    09         //发生了状态变化，则执行更新，一般来说本操作并不需要，因为当 manifest 文件变化时会发生 onnoupdate 事件，浏览器会自动更新缓存文件
    10         if(window.applicationCache && window.applicationCache.status == UPDATEREADY){
    11              window.applicationCache.update();
    12         }
    13     </script>
    14 </head>
    15 <body>
    16     HTML5 cache!
    17 </body>
    18 </html>

    3. 配置服务器的 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 支持的监听函数有如下几种，适当的定义这些函数即可对离线应用的更新流程及应用的处理进行控制。

    01 // 定义离线缓存的事件监听
    02 function deAppCacheHandler(){
    03     if(! applicationCache ) return;
    04  
    05     //信息提示
    06     function msgTips(msg){
    07         $('.longMsg .label-info').html(msg);
    08         console.log(msg);
    09     }
    10  
    11     applicationCache.onchecking = function(){
    12         //检查manifest文件是否存在
    13         msgTips('正在检测离线缓存配置...');
    14         //return false;
    15     };
    16  
    17     applicationCache.ondownloading = function(){
    18         //检查到有manifest或者manifest文件
    19         //已更新就执行下载操作
    20         //即使需要缓存的文件在请求时服务器已经返回过了
    21         msgTips('本地缓存正在更新中...');
    22         window.precesscount = 0; //用于进度计算
    23         return false;
    24     };
    25  
    26     applicationCache.onnoupdate = function(){
    27         //返回304表示没有更新，通知浏览器直接使用本地文件
    28         msgTips('您使用的是最新版本');
    29         setTimeout(function(){
    30             msgTips('');
    31         }, 5000);
    32         return false;
    33     };
    34  
    35     applicationCache.onprogress = function(e){
    36         //下载的时候周期性的触发，可以通过它
    37         //获取已经下载的文件个数
    38         var precess = '';
    39         if(e & e.lengthComputable){
    40             precess = ' ' + Math.round(100 * e.loaded / e.total) + '%'
    41         }else{
    42             window.precesscount += 1;
    43             precess = '(' + window.precesscount + ')';
    44         }
    45         msgTips('本地缓存正在更新中... ' + precess);
    46         return false;
    47     };
    48  
    49     applicationCache.oncached = function(){
    50         //下载结束后触发，表示缓存成功
    51         msgTips('全部离线内容缓存成功！');
    52         return false;
    53     };
    54  
    55     applicationCache.onupdateready = function(){
    56         //第二次载入，如果manifest被更新
    57         //在下载结束时候触发
    58         //不触发onchched
    59         /*/alert("本地缓存正在更新中。。。");
    60         if(confirm("是否重新载入已更新的文件？")){
    61            applicationCache.swapCache();//弃用旧的缓存文件
    62            location.reload();
    63         }//*/
    64         msgTips('已有新版本，请刷新页面载入');
    65         applicationCache.swapCache();//弃用旧的缓存文件
    66         return false;
    67     };
    68  
    69     applicationCache.onobsolete = function(){
    70         //未找到文件，返回404或者401时候触发
    71         msgTips('离线缓存功能已删除');
    72         return false;
    73     };
    74  
    75     applicationCache.onerror = function(){
    76         //其他和离线存储有关的错误
    77         msgTips('无法访问离线配置文件');
    78         return false;
    79     };
    80  
    81     window.onoffline = function(){
    82         msgTips('离线状态');
    83         return false;
    84     };
    85 }
  • 相关阅读:
    爬虫笔记之JS检测浏览器开发者工具是否打开
    上海租房@8群
    在Windows中玩转Docker Toolbox(镜像加速)
    Docker 清理命令 删除所有的镜像和容器
    修改docker安装的machine位置
    Sass @mixin 与 @include
    webpack之SourceMap
    c#中Indexof()和Split()的用法
    《MVC+EF》——用DBFirst创建ADO.NET实体数据模型和对象关系映射
    sql server 用户'sa'登录失败（错误18456）
  • 原文地址：https://www.cnblogs.com/sunshq/p/4318485.html
Copyright © 2020-2023  润新知