要使用manifest缓存,我们首先需要写一个manifest文件。这个文件有严格的格式要求,下面是个例子CACHE MANIFEST
#我是注释,这个文件名叫test.manifest
CACHE:
/test.css
/test.js
  这就是一个简单的manifest文件。一开始必须是“CACHE MANIFEST”来声明这是一个manifest文件。后面的“CACHE:”是操作类型,再后面的两个文件按路径是“CACHE:”这个操作类型作用的文件,表示这些文件需要缓存。当然,操作类型不止CACHE一种,这个后面再说。我们先来说说大家最关心的问题。这个manifest文件怎么使用?
  使用manifest文件只要在页面的HTML标签中加入一个属性“manifest="manifest文件路径"”就可以了,比如< html manifest="test.manifest">
< head>
  < link href="test.css" rel="stylesheet" />
  < script src="test.js">< /script>
< /head>
< body>
  < div>次碳酸钴< /div>
< body>
< /html>
  这个页面就使用了上面写的manifest文件,我们用Chrome打开这个页面就可以在控制台中找到这个manifest的工作信息。

  从这个信息中可以看出,我们设置的需要缓存的两个文件都缓存了。而且引用manifest的那个页面也被缓存了。这个很重要,这个是manifest的机制,它除了会缓存设置好的文件之外,还会缓存当前引用manifest文件的页面(想关都关不掉)。所以使用起来很不方便,这就需要注意。
  另外,manifest缓存之后的东西只有在manifest文件发生变化时才会跟新(貌似是这个文件的md5发生变化时才更新)。而被缓存文件更新时浏览器是不会去获取新文件的。也就是说,刚刚那个页面已经缓存了test.css,现在我修改了test.css,页面也不会有任何变化。除非我修改manifest文件本身的内容(注意是内容,不是修改时间)。一般为了更新这个缓存,可以在里面的注释中放入修改时间来更新它。这个我就不截图了,好麻烦的。
  说完这些问题,现在回过头来看看manifest本身的写法。除了上面的“CACHE:”之外,还有几个操作类型。下面是这些操作类型和说明
    CACHE:设置后面的文件为缓存
    NETWORK:置后面的文件为不缓存(无法设置自身页面)
    FALLBACK:置后面的文件错误或不存在的时候使用另一个文件
    SETTINGS:可以设置fast或prefer-online两种模式
  CACHE是设置缓存,之前已经说过了。
  NETWORK是设置不缓存。由于manifest的机制是把整个页面(或者说Web应用)储存的本地。所以,当前页面使用的所有资源都必须有一个设置。如果不设置就会在页面缓存之后找不到,所以通常需要使用NETWORK来匹配所有不需要缓存的资源,如下面这样。CACHE MANIFEST
NETWORK:
*
  FALLBACK是不存在是使用另一个文件替代,下面是个例子CACHE MANIFEST
#test.manifest
FALLBACK:
/x.css /test.css
< html manifest="test.manifest">
< head>
  < link href="x.css" rel="stylesheet" />
< /head>
< /html>

  由于x.css不存在,所以缓存时候采用了test.css来代替它。
  SETTINGS可以设置成两种模式,默认是fast。但是在我的测试中没感觉到这两种模式有什么区别,这个就暂时不说了。
  这些就是manifest缓存最基本的东西,还有一个很大的问题就是火狐的警告。当使用manifest时,火狐下会出现警告。
 
  这就是这个东西最蛋疼的地方,所以现在先稍稍了解下,不去深入研究。等以后这些问题都解决了在来回头看这货吧。其实manifest的作用是把Web应用本地化,如果仅仅是做“Web应用本地化”,确实可以用上。但是这个东西在其他方面实在是不给力。所以目前的项目都不会考虑用这党疼的玩意儿。上面的这么多也只是入门级的测试,还有好多东西需要测试。不过由于现在用不上,暂时就不研究了。

HTML5的manifest缓存的更多相关文章

  1. HTML5之应用缓存---manifest---缓存使用----HTML5的manifest缓存

    相信来查这一类问题的都是遇到问题或者是初学者吧! 没关系相信你认真看过之后就会知道明白的 这是HTML5新加的特性 HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连 ...

  2. HTML 5 应用程序缓存(Application Cache)cache manifest 文件使用 html5 中创建manifest缓存以及更新方法 一个manifest文件会创建一份缓存,不同的manifest文件其缓存的内容是互不干扰的

    HTML5 离线缓存-manifest简介 HTML 5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(A ...

  3. 使用html5的离线缓存技术

    突然想用html5的离线缓存,但是一直没有成功,在各种群里问发现很多人都没什么经验,最终终于在各种论坛找到解决方案了.下面就简单记录一下相关情况. 一.离线缓存的优点 我们都知道离线缓存主要是用来减少 ...

  4. html5—— 应用程序缓存

    使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这 ...

  5. html5应用程序缓存

    缓存概念: ------页面缓存: html.JS.CSS等,这些缓存资源是由于浏览器的行为而产生; ------数据缓存 ----------AppCache:  Cache Manifest 操作 ...

  6. HTML5应用程序缓存实现离线Web网页或应用

    HTML5应用程序缓存和浏览器缓存的区别.(有些)浏览器会主动保存自己的缓存文件以加快网站加载速度.但是要实现浏览器缓存必须要满足一个前提,那就是网络必须要保持连接.如果网络没有连接,即使浏览器启用了 ...

  7. HTML5离线资源缓存简介

    cache manifest 示例 要使用离线资源缓存,开发者首先要提供一个 cache manifest 文件 它列出了所有需要在离线状态下使用的资源,浏览器会把这些资源缓存到本地 下面就是一个 c ...

  8. HTML5: HTML5 应用程序缓存

    ylbtech-HTML5: HTML5 应用程序缓存 1.返回顶部 1. HTML5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线 ...

  9. cookie,sessionStorage,loclaStorage,HTML5应用程序缓存

    cookie Cookie 是一些数据,由服务器生成,发送给浏览器,一旦用户从该网站或服务器退出,Cookie 就存储在用户本地的硬盘上,下一次请求同一网站时会把该cookie发送给服务器.Cooki ...

随机推荐

  1. Use windows batch script to create menu

    Background Recently, I find that we need  to  type some very long gradle commands to run build, chec ...

  2. window下安装composer and yii2

    我的环境是集合包xampp 1,下载composer:下载地址https://getcomposer.org/download/, 点击蓝色字体“Composer-Setup.exe” 2,安装com ...

  3. asp.net中几个网页跳转的方法及区别

    1:注意:Response.Redirect("a.html")是不能跳出框架.IFRAME的. 可以使用 Response.Write("<script Lang ...

  4. C#中SaveFileDialog 和OpenFileDialog 的用法

    1.OpenFileDialog private void btnOpen_Click(object sender, EventArgs e) { OpenFileDialog ofd = new O ...

  5. Quartz的任务的临时启动和暂停和恢复

    Quartz的任务的临时启动和暂停和恢复 在项目中需要手动启停某些服务,那么需要有一个控制这些任务的类.由于任务是有Quartz控制的,我们只需要通过Quartz的相关的API实现相关的功能即可. p ...

  6. 喵星人教你记 HTTP 状态码

    记忆HTTP状态码是有一些困难的,因为状态码很多且很难记忆.GirlieMac,也就是Tomomi Imura利用她巧妙的构思,PS了一系列的HTTP状态信息.在你看过这些图片之后,你绝对可以记住一些 ...

  7. java中文排序

    对中文名称进行排序,不多说,上代码 package test; /** * @Title: Person.java * @Copyright: Copyright (c) 2012-11-19 * @ ...

  8. TagHighlight

    :UpdateTypesFile 命令会生成相应的上色高亮文件(生成的着色文件可以叫types_c.taghl)还有相应的tags文件,寻找tags或taghl_config.txt确定project ...

  9. 从Uboot到Linux技术内幕

    1. 引言 在专用的嵌入式板子运行 GNU/Linux 系统已经变得越来越流行.一个嵌入式 Linux 系统从软件的角度看通常可以分为四个层次: 1. 引导加载程序.包括固化在固件(firmware) ...

  10. Hibernate框架简述

    Hibernate的核心组件在基 于MVC设计模式的JAVA WEB应用中,Hibernate可以作为模型层/数据访问层.它通过配置文件(hibernate.properties或 hibernate ...