离线应用Application Cache详解

特点：

    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中列出的所有资源，而不是发生改变的部分

 

 

 

转载于:https://www.cnblogs.com/chollaflower/p/3185935.html