一. 什么是manifest

首先manifest是一个后缀名为minifest的文件，在文件中定义那些需要缓存的文件，支持manifest的浏览器，会将按照manifest文件的规则，像文件保存在本地，从而在没有网络链接的情况下，也能访问页面。

当我们第一次正确配置app cache后，当我们再次访问该应用时，浏览器会首先检查manifest文件是否有变动，如果有变动就会把相应的变得跟新下来，同时改变浏览器里面的app cache，如果没有变动，就会直接把app cache的资源返回，基本流程是这样的。

二. 使用方法

　　1. html新增了一个manifest属性，可以用来指定当前页面的manifest文件。创建一个和html同名的manifest文件，比如页面为index.html，那么可以建一个index.manifest的文件，然后给index.html的html标签添加如下属性即可：

<html lang="en" manifest="index.manifest">

　　2. manifest文件，基本格式为三段： CACHE， NETWORK，与 FALLBACK，其中NETWORK和FALLBACK为可选项。

CACHE MANIFEST

#version 1.3

CACHE:

test.css

NETWORK:

*

三. 注意事项：

  • 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

  • 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。

  • 引用manifest的html必须与manifest文件同源，在同一个域下。

  • FALLBACK中的资源必须和manifest文件同源。

  • 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。

  • 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问。

  • 当manifest文件发生改变时，资源请求本身也会触发更新。

四. 更多内容

　　1. 为了实现离线缓存，manifest文件必须包含该html页面的所有资源文件。

　　2. 通常manifest还有一个特别大的用途，就是前段页面的版本控制。

　　一般来说，manifest文件可能如下：

CACHE MANIFEST

NETWORK:

*

CACHE:

index.html?SIMU_PATH_VERSION

css/dahuo_core.css?CSS_VERSION

css/index.css?CSS_VERSION

css/search.css?CSS_VERSION

js/zepto.min.js?JS_VERSION

js/dahuo_core.js?JS_VERSION

js/touchslider.js?JS_VERSION

js/webtools.js?JS_VERSION

js/config.js?JS_VERSION

js/search.js?JS_VERSION

js/index.js?JS_VERSION

js/webchat.js?JS_VERSION

#images

images/droploading.gif

images/loading.gif

images/search-index-icon.png

images/guideicon9.png

images/guideicon12.png

images/guideicon11.png

images/search-new.png

images/delete-button.png

images/simu_main.png

　　3. 还差一步完成离线缓存页面，缓存API，数据可以缓存到localStorage

　　　　一般来说，先执行获取缓存加载页面的方法，在发送API，比较返回数据与缓存数据是否相同。实现逻辑如下：

var Main = {

  init:  function()  {

    ...

    this.initIndex();

    this.fetchData();

  },

  initIndex: function() {

    var self = this;

    var respData = DahuoCore.getLocal(self.localKey);

    if ($.type(respData) == "string") {

      respData = $.parseJSON(respData);

      if ($.type(respData) == "object" && respData.status == "1") {

        self.processData(respData.data);

      }

    }

  },

  var self = this;

    $.ajax({

      url: ...,

      type: "GET",

      dataType: "json",

      data: {

        ...      
      },

      complete: function(xhr, status) {

        if (status == "success") {

          var resp = $.parseJSON(xhr.response);

          if ($.type(resp) == "object") {

            if (resp.status == 1) {

              var localData = DahuoCore.getLocal(self.localKey);

              var newData = JSON.stringify(resp);

              if (newData !== localData) {

                if (resp.data) {

                  DahuoCore.setLocal(self.localKey, newData);

                  self.processData(resp.data);

                } else {

                  DahuoCore.toast({ "content": "加载失败" });

                }

              }

            } else if (resp.status == 0) {

              DahuoCore.toast({ "content": resp.msg });

            } else {

              self.ajaxErrorHandler(xhr, status);

            }

          }

        }

        DahuoCore.loading.hide();

      },

      timeout: 30000

    });

  },

  processData: function(data) {

    ...

  }

}

　　4. 大功告成。

　　　　but，一点点瑕疵，当manifest更新时，浏览器并没有更新到最新的网页，而是下次进来时更新。

　　　　为了解决这个问题，需要接受manifest更新事件，然后reload页面。于是：

function checkManifest() {

  window.applicationCache.addEventListener('updateready', function(e) {

    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {

      window.applicationCache.swapCache();

      window.location.reload();

    }

  }, false);

}

Html5离线缓存简介的更多相关文章

  1. HTML5 离线缓存Appcache

    创建一个和html同名的manifest文件,比如页面为index.html,那么可以建一个index.manifest的文件,然后给index.html的html标签添加如下属性即可: <ht ...

  2. HTML5离线缓存（Application Cache）

    HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...

  3. HTML5 离线缓存管理库

    一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...

  4. HTML5离线缓存问题

    HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...

  5. html5离线缓存使用

    html5 离线缓存使用以及注意事项 1.index.html中加入离线缓存的声明文件 如:<!DOCTYPE html><html manifest="test.appc ...

  6. node.js与HTML5离线缓存

    最近正学到HTML5的离线缓存,却看到需要配置服务器.一下子就懵了,毕竟服务器的有关配置一般是很复杂的,而node.js的服务器是自己的代码生成的,这下要怎么配置?在网上搜索了很久,都没用关于node ...

  7. HTML5离线缓存攻击测试

    本实验采用局域网模拟,通过修改本地HOSTS文件来模拟域名以及DNS欺骗.合法网站使用Linux CentOS7的apache服务器搭建,IP为192.168.1.113,HOSTS文件中加入192. ...

  8. HTML5离线缓存

    参考文档:http://www.w3cschool.cc/html/html5-app-cache.html HTML5 应用程序缓存 又称离线缓存 ,即使断线了,刷新后也还是缓存了原来的页面,不会4 ...

  9. Html5离线缓存详细讲解

    离线缓存是Html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用.当然,Html5新的特性都不是所有浏览器都能支持的 ...

随机推荐

  1. 设置VMWare虚拟机使拷贝虚拟机后固定原有的IP地址

    VMWare中已经安装并设置好的虚拟机在拷贝给别人后,再次打开该虚拟机时原有自动获取的IP地址将会变化,那么原有根据该IP地址进行的设置均将失效,还需要重新设置,比较麻烦,经过百度查询原来可以将虚拟机 ...

  2. 牛客网-3 网易编程题（1拓扑&2二叉树的公共最近祖先&3快排找第K大数）

    1. 小明陪小红去看钻石,他们从一堆钻石中随机抽取两颗并比较她们的重量.这些钻石的重量各不相同.在他们们比较了一段时间后,它们看中了两颗钻石g1和g2.现在请你根据之前比较的信息判断这两颗钻石的哪颗更 ...

  3. 喜欢Swift编程语言的人主要是初学者？

    一早一起来,朋友圈除了被苹果发布会刷屏外,还漫天散布着一条类似的招聘消息:“招聘iOS程序员,要求拥有5年的Swift开发经验,有狼性,待遇月薪20K+,专车接送.” 随后身边的朋友很快就开始调侃:& ...

  4. Shell script之How to write

    Write shell script: 1) Editor like vi or mcedi 2) Set execute permission for your script chmod  perm ...

  5. 6.11 将分割数据转换为多值IN列表

    问题 已经有了分隔数据,想要将其转换为WHERE子句IN列表中的项目.考虑下面的字符串: 7654,7698,7782,7788 要将该字符串用在WHERE子句中,但是下面的SQL语句是错误的,因为E ...

  6. （转）WKT转换工具terraformers

    http://blog.csdn.net/gisshixisheng/article/details/53150111 概述: 前面的文章中,提到了Arcgis中实现wkt转换为geometry,但是 ...

  7. swift- mutating

    struct Stack<Element> { var items = [Element]() func push(_ item:Element){ self.items.append(i ...

  8. No value specified for parameter1？

    我使用的是jdbcTemplate,因为忘记向list中加入参数,所以报错. 解决方案,: String sql = "select * from table where id = ?&qu ...

  9. iview“官方“实现的右键菜单

    博客开篇,没想到第一篇博文竟然是前端的,虽略显尴尬,但正能量溢出,你我可能遇到同样问题,在这里分享下个人方案,希望对你有用. 官方目前不提供右键菜单,这里借助Dropdown(下拉菜单)来实现,故为“ ...

  10. ubuntu安装nvidia驱动以及cuda教程

    最近尝试在ubuntu中安装nvidia的显卡驱动以及cuda.花了近三天时间,真的如网上所说错误百出,期间甚至重装了一次ubuntu系统,搞到怀疑人生,整个都是泪- -.最终经过百般“磨难”总算安装 ...