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