习惯性的贴几个参考链接:

W3School-HTML 5 应用程序缓存

官方 MDN window.applicationCache 接口文档

官方 MDN 用法示例

看所有的教程不如直接看最原始的官方教程,下面的内容是对官方教程(官方 MDN 用法示例)中自己觉得有价值的部分的文档的翻译:

Entries in a cache manifest file

The cache manifest file is a simple text file that lists the resources the browser should cache for offline access. Resources are identified by URI. Entries listed in the cache manifest must have the same scheme, host, and port as the manifest.

翻译:manifest缓存文件是一个简单的文本文件,他只不过是列出了浏览器需要缓存的以便离线时可以使用的资源.这些资源通过URI识别,manifest文件中列出的所有资源条目都必须具有和manifest文件相同的规范, 主机, 端口号(译注:就是缓存文件必须是同域名下的文件)

Example 1: a simple cache manifest file

The following is a simple cache manifest file, example.appcache, for an imaginary web site at www.example.com.

CACHE MANIFEST
# v1 - 2011-08-13
# This is a comment.
http://www.example.com/index.html
http://www.example.com/header.png
http://www.example.com/blah/blah

A cache manifest file can include three sections (CACHENETWORK, and FALLBACK, discussed below). In the example above, there is no section header, so all data lines are assumed to be in the explicit (CACHE) section, meaning that the browser should cache all the listed resources in the application cache. Resources can be specified using either absolute or relative URLs (e.g., index.html).

The "v1" comment in the example above is there for a good reason. Browsers only update an application cache when the manifest file changes, byte for byte. If you change a cached resource (for example, you update the header.png image with new content), you must also change the content of the manifest file in order to let browsers know that they need to refresh the cache. You can make any change you want to the manifest file, but revising a version number is the recommended best practice.

翻译:一个cache manifest 文件包含三个部分(CACHE, NETWORK, 和FALLBACK, 下面将会详细讨论). 在上述的例子中,并没有任何节标题(原文:there is no section header),所以,上例中所列出来的所有数据都假设被加到了CACHE条目下,意思就是说,浏览器会缓存所列出来的所有资源.这些资源可以被指定使用绝对路径或是相对路径来引用(比如:index.html)

对上述例子中的注释"V1"的很好的解释就是,浏览器只会在manifest文件修改时才会更新浏览器缓存,而且是一个字节一个字节的更新(原文:byte for byte.译注:意思就是所会更新整个缓存,而不是只更新你修改的那部分).如果你改变了缓存资源(例如,你用一个新的内容更新了header.png这张图片),你必须也要修manifest文件,为了是让浏览器知道他需要更新缓存了.你可以修改manifest文件中你想修改的任意部分,但是修改版本号是我们推荐的最好的做法.

Important: Do not specify the manifest itself in the cache manifest file, otherwise it will be nearly impossible to inform the browser a new manifest is available.

重要:不要指定manifest文件本身作为缓存内容,否则,他将不能通知浏览器有新的manifest文件可用.

Sections in a cache manifest file: CACHENETWORK, and FALLBACK

A manifest can have three distinct sections: CACHENETWORK, and FALLBACK.

CACHE:
This is the default section for entries in a cache manifest file. Files listed under the CACHE: section header (or immediately after theCACHE MANIFEST line) are explicitly cached after they're downloaded for the first time.
翻译:这是一个默认选项,写在该节标题下的(或者是直接写在CACHE MANIFEST 下的),在他们第一次下载完成后,都会被明确的缓存起来.
NETWORK:
Files listed under the NETWORK: section header in the cache manifest file are white-listed resources that require a connection to the server. All requests to such resources bypass the cache, even if the user is offline. The wildcard character * can be used once. Most sites need *.
翻译:写在该节标题下的文件,像是白名单资源一样的存在,他们都需要向连接服务器,请求资源从而绕开缓存,哪怕用户是离线状态. 通配符*只能使用一次,大部分的网站都需要*(译注:通配符*表示缓存所有的资源,当然,是除了CACHE中说明的所有资源)
FALLBACK:
The FALLBACK: section specifies fallback pages the browser should use if a resource is inaccessible. Each entry in this section lists two URIs—the first is the resource, the second is the fallback. Both URIs must be relative and from the same origin as the manifest file. Wildcards may be used.
翻译:FALLBACK小节指定当资源不可用时的替代页面,该小节中每一个条目都有两个URI,第一个是资源的URI,第二个是替代页面的URI.两个URI必须成对出现,而且和manifest文件有相同的根目录,可以使用通配符.

The CACHENETWORK, and FALLBACK sections can be listed in any order in a cache manifest file, and each section can appear more than once in a single manifest.

翻译:三个节标题可以出现在任何manifest文件中,也可以多次出现.

官方给的第二个例子
CACHE MANIFEST
# v1 2011-08-14
# This is another comment
index.html
cache.html
style.css
image1.png # Use from network if available
NETWORK:
network.html # Fallback content
FALLBACK:
/ fallback.html
需要说明的是FALLBACK部分:
"/"和"fallback.html"之间有一个空格,说明就是任何文件加载失败,都会用fallback.html替代, 不要把"/ fallback.html"当作一个路径URI 其他说明:比如res/ fallback.html的用法,表示访问,任何请求到http://<host:port>/res/或它的任何子目录及其内容导致浏览器发出一个网络请求试图加载请求的资源。如果尝试失败,由于网络故障或服务器错误,浏览器都会加载fallback.html.

.

.之间省略了一段不太重要的内容就不翻译了

.

Cache states(缓存状态)

Each application cache has a state, which indicates the current condition of the cache. Caches that share the same manifest URI share the same cache state, which can be one of the following:

翻译:每一个应用缓存都有一个状态,这个状态用来说明缓存的当前状态.缓存共享相同的manifest URI,共享相同的缓存状态,这些状态必定在下面的某一个中:

UNCACHED(未缓存)
A special value that indicates that an application cache object is not fully initialized.
翻译:一个特殊的值表明应用缓存并没有完全的初始化
IDLE(空闲状态)
The application cache is not currently in the process of being updated.
CHECKING
The manifest is being fetched and checked for updates.
翻译:应用程序缓存并不是目前在更新的过程中。
DOWNLOADING(下载中)
Resources are being downloaded to be added to the cache, due to a changed resource manifest.
翻译:由于改变了资源清单, 资源被下载到被添加到缓存中.
UPDATEREADY(更新就绪)
There is a new version of the application cache available. There is a corresponding updateready event, which is fired instead of the cached event when a new update has been downloaded but not yet activated using the swapCache() method.
翻译:有一个新版本的应用程序缓存可用。当一个新的更新已经被下载,会有一个相应的updateready事件被cached事件代替, 但新版本尚未被激活使用swapCache()方法。
OBSOLETE(过期状态)
The application cache group is now obsolete.
翻译:应用程序缓存现在过期了。

关于如何使用appcache缓存将在文章  HTML5之window.applicationCache对象  中详细说明

HTML5之appcache语法理解/HTML5应用程序缓存/manifest缓存文件官方用法翻译的更多相关文章

  1. HTML5——web存储 Web SQL 数据库 应用程序缓存 Web Workers 服务器发送事件 WebSocket

    web存储 比cookie更好的本地存储方式 localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除. sessionStorage - 用于临时保存同一窗口( ...

  2. HTML 5 应用程序缓存manifest

    什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏 ...

  3. 小程序缓存Storage的基本用法

    wx.setStorageSync('key', 'hello world') 然后在小程序调试器里面的Storage里面就能看到设置的值.在小程序里面,如果用户不主动清除缓存,这个缓存是一直在的. ...

  4. 【HTML5】浅析HTML5应用程序缓存(ApplicationCache)

    一.为什么需要Web应用程序缓存 在移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐在火车上,过了一个隧道(15分钟),便无法访问网站,这对于web的伤害是很大的    ...

  5. HTML5应用程序缓存Application Cache

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  6. 深入理解HTML5:语义、标准与样式(勇猛精进早登大师殿堂创最优品质交互)

    深入理解HTML5:语义.标准与样式(勇猛精进早登大师殿堂创最优品质交互) [美]布拉德福(Bradford,A.) [美]海涅(Haine,P.)著 高京译 ISBN 978-7-121-20552 ...

  7. HTML5应用程序缓存Application Cache详解

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  8. 【HTML5】Application Cache应用程序缓存

    HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载 ...

  9. 神奇的HTML5离线存储(应用程序缓存)

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...

随机推荐

  1. 201521123074 《Java程序设计》第3周学习总结

    1.本周学习总结 用百度脑图画了一张,点开图片全屏就可以看清楚了 脑图链接 2.书面作业 Q1.代码阅读 以下代码可否编译通过?哪里会出错?为什么?尝试改正? 如果创建3个Test1对象,有内存中有几 ...

  2. 201521123012 《Java程序设计》第一周学习总结

    一.本章学习内容 1.了解了JDK.JRE .JVM. 2.大概看过了Java的诞生.版本演进(JDK1.1.4,JDK1.1.5--JDK1.1.8,J2SE1.2--Java SE 8)以及三大平 ...

  3. 201521123042《Java程序设计》 第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. ①finally块:无论是否被捕获或执行异常一定会被执行. 在try或catch中遇到return语句时,final ...

  4. 201521123100 《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 1.本次PTA作业题集异常 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...

  5. 201521123092《java程序设计》第十三周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 2.1. 网络基础 1.1 比较ping www.baidu.com与ping cec.j ...

  6. 一个Markdown的例子

    一个例子: 例子开始 1. 本章学习总结 今天主要学习了三个知识点 封装 继承 多态 2. 书面作业 Q1. java HelloWorld命令中,HelloWorld这个参数是什么含义? 今天学了一 ...

  7. hibernate中Query的list和iterator区别

    1.Test_query_list类 public class Test_query_iterator_list { public static void main(String[] args) { ...

  8. Linux环境下启动MySQL数据库出现找不到mysqld.sock的解决办法!

    问题: 在普通用户权限下运行:mysql -u root -p,回车之后如果会出现如下错误:ERROR 2002 (HY000): Can't connect to local MySQL serve ...

  9. SpringMVC基础入门,创建一个HelloWorld程序

    ref:http://www.admin10000.com/document/6436.html 一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要 ...

  10. IDEA——IDEA使用Tomcat服务器出现乱码问题

    最近刚使用IDEA,在开发一个功能的时候,开始使用Jetty作为容器进行web项目开发,测试通过.然后想了一下线上服务器使用的容器是Tomcat,还是用Tomcat跑一下项目在测试一下,本地和服务器使 ...