特点：
    1.离线可访问            - 没有网络仍可访问整个应用
    2.很小的服务器负载  - 缓存在本地，不需要到服务器请求
    3.高速                     - 加载几乎不需要时间
典型应用场景：
    1.网页游戏
    2.单页面应用
传统浏览器缓存（Browser Caching）：
    1.缓存协商 last-modified, Etag
        请求资源时去服务器询问资源有没有修改过，如果没有就返回304使用缓存的资源，更改过就返回新资源。
        缓存协商过程：
            1.服务器返回带有类似Last-modified:Mon, 04 Feb 2013 11:21:50 GMT的响应。
            2.浏览器发送带有类似If-Modified-Since:Mon, 04 Feb 2013 11:21:50 GMT的请求。
            3.服务器端根据Last-modified和If-Modified-Since判断浏览器缓存是否过期并发送相对应的响应。
           Etag的工作原理与Last-midified类似，不同点在于Etag的值是用户可自定义的 
    2.彻底缓存 cache-control, Expires
        意思是在缓存失效之前不再和服务器请求
        浏览器总是优先使用cache-control，如果没有cache-control才考虑Expires
与传统浏览器缓存的区别：
    1.离线缓存可以在离线状态下使用，而浏览器缓存不可以
    2.离线缓存可以手动更新，而浏览器缓存不可以
    3.离线缓存可以指定缓存文件，浏览器缓存不可以
    4.离线缓存应用于整个web，浏览器缓存只缓存一个页面
 
具体实现：
    
    1. 缓存清单文件manifest，告诉浏览器缓存哪些文件，结构如下：
 
    CACHE MANIFEST  <------必须在第一行
    #version 0.5

    FALLBACK:            <--------指定资源获取失败时的替代资源，地址必须为相对地址，可选
    rest.html fallback.html

CACHE:                <--------需要缓存的文件列表
    applicationCache.html

    js/tesk.js

js/test1.js
    js/test2.js
    js/test3.js
    js/test4.js
    js/test5.js
    images/flag.jpg
    css/test.css
    NETWORK:          <--------需要从网络获取的文件，*代表全部（除CACHE中的文件），注意要换行写

    *
 
    2. 在html标签中引用manifest文件
 
        <html manifest="./cache.manifest">
 
        地址可以是相对或绝对的，但要同源。
    3. 让服务器支持，以apache为例
        在httpd.conf中搜mime_module，并在里面添加：
            AddType text/cache-manifest .manifest
        .manifest为文件扩展名，可更改。
        现在浏览器应该可以缓存manifest中的文件了！！
    4. 处理事件
        
        其中，swapCache方法将会用新加载的资源替换离线缓存数据，但此时浏览器依旧用老的缓存，location.reload()刷新后才真正应用了新的缓存，更新才真正完成。
    5. 缓存状态
        
 
    6. 更新
        调用applicationCache.update()，浏览器将尝试更新缓存，如果manifest文件有变化，将启动更新。
    7. 可以使用applicationCache.abort()终止正在进行的缓存
 
注意事项：
    1. 只有更新manifest文件本身才会导致缓存更新，更改里面列出的文件不会进行缓存的更新！
    2. manifest中列出的文件，只要有一个加载失败，就会导致整个缓存过程失败
    3. 服务器端设置的mime-type一定要正确，否则不会缓存任何文件
    4. 缓存大小都是5MB
    5. 引用manifest文件的html文件会被自动缓存，所以manifest文件中不必列出该文件，但列出也不会产生任何问题
    6. manifest文件FALLBACK区地址一定要是相对地址
    7. 删除manifest文件浏览器将清除离线缓存
    8. 没有引用manifest文件的页面，也可以从缓存中加载资源
    9. 每次更新，将加载并缓存manifest中列出的所有资源，而不是发生改变的部分
 
 
 

离线应用Application Cache详解的更多相关文章

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

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

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

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

  3. SpringBoot配置文件 application.properties详解

    SpringBoot配置文件 application.properties详解   本文转载:https://www.cnblogs.com/louby/p/8565027.html 阅读过程中若发现 ...

  4. 转 html5离线储存,application cache,manifest使用体验

    html5离线应用application cache 最近在APP里新增一个论坛模块,为了快速地完成,决定将整个论坛模块做成WEB APP,WEB APP最致命的就是用户体验问题,页面跳转和过多的请求 ...

  5. (转)MyISAM Key Cache详解及优化

    原文:http://huanghualiang.blog.51cto.com/6782683/1372721 一.MyISAM Key Cache详解: 为了最小化磁盘I/O,MyISAM将最频繁访问 ...

  6. [转]application.properties详解 --springBoot配置文件

    本文转载:http://blog.csdn.net/lpfsuperman/article/details/78287265###; # spring boot application.propert ...

  7. application.properties详解 --springBoot配置文件【转载】

    # spring boot application.properties配置的各个属性详解 # 该示例文件作为标准提供.(官方文档 翻译过来的) # 还是花了些功夫翻译,各位如果转发,请留下本文地址, ...

  8. application.properties详解 --springBoot配置文件

    本文转载:http://blog.csdn.net/lpfsuperman/article/details/78287265###; # spring boot application.propert ...

  9. springboot集成freemarker 配置application.properties详解

    #配置freemarker详解 #spring.freemarker.allow-request-override=false # Set whether HttpServletRequest att ...

随机推荐

  1. PySide 简易教程<三>-------动手写起来

    到目前为止,已经接触的Pyside的界面元素有如下几个:QWidget.QPushButton.QLabel.本次再介绍两个tooltip和messagebox.tooltip是一个鼠标悬浮提示信息, ...

  2. Python 的列表解析和生成表达式的异同

      Python中的列表解析和生成表达式是非常好的特性,他们的形式相似,但是应用场景不太一样. 相似点 列表解析和生成表达式最大的相似点是使用形式: [expr for iter_var in ite ...

  3. mac常用设置

    1.修改mac主机名 系统偏好设置->共享->电脑名称 ,编辑就可以了. sudo scutil --set HostName hostname 这个是修改主机名 sudo scutil ...

  4. c++迭代器（iterator）详解

    1. 迭代器(iterator)是一中检查容器内元素并遍历元素的数据类型.(1) 每种容器类型都定义了自己的迭代器类型,如vector:vector<int>::iterator iter ...

  5. AnyChartStock去除水印方法

    最近在使用AnyChartStock的图表,功能很强大,但下载过来是有水印的,虽然网上也有很多破解无水印的版本,但基本都是AnyChart的,AnyChartStoc的几乎没有.所以自己尝试着去除水印 ...

  6. MyEclipse 2013官网下载地址以及破解方法

    刚刚发布了MyEclipse 2013,我现在用的还是6.5的版本,6.5的版本是我觉得最好用的一个版本. 我装上了,还没感受到有哪些好用,就是感觉体积庞大,和IBM 的WID一样,是个多面手,啥事都 ...

  7. bnuoj 25659 A Famous City (单调栈)

    http://www.bnuoj.com/bnuoj/problem_show.php?pid=25659 #include <iostream> #include <stdio.h ...

  8. Luence简单实现2

    上一篇是基于内存存储的,这次的例子是基于本地存储索引库. 上一次的代码稍微修改,代码如下: //创建词法分析器 Analyzer analyzer = new StandardAnalyzer(); ...

  9. 使用XAMPP本地安装Wordpress博客

    最近一直在研究博客,也知道了大名鼎鼎的wordpress,因此也希望动手尝试一下,看看跟网站提供的博客有何区别. 第一个问题:能什么安装wordPress,能否用tocmat? 虽然问题很可笑,但是之 ...

  10. $POST数组论证($GET || $COOKIE || $REQUEST 同理)

    我觉得还是有多个$_POST  如果只有一个$_POST,那么,多个人[同时]提交的话就不好处理  或者一个$_POST 时间限制(如同时钟周期)处理(不可能,不然响应没这么快) 或者 一个$_POS ...