通过指定HTML文件的缓存文件列表,就可以使客户端缓存列表中的文件到本地,这一特性可以减少不必要的通信访问,甚至可以开发离线使用的web应用程序。下面是一个简单的例子。在HTML中指定缓存列表文件后缀为appcache,但其实并没有规定特定的拓展名,但为了清楚文件的用途,推荐使用.appcache
cache.html
<!DOCTYPE html> <html manifest="sample.appcache"> <head> <meta charset="UTF-8"> <title>test cache</title> <link rel="stylesheet" href="cache.css"> </head> <body> <h1>Cache Sample</h1> <img src="t.png" alt=""> <script src="cache.js"></script> </body> </html>下面是缓存文件中的配置
sample.appcache
CACHE MANIFEST # revision 1 CACHE: ./cache.js ./cache.css ./t.png
第一行必须是CACHE MANIFEST,以#开始的行为注释 ,从CACHE: 开始其后内容为自动缓存的内容
其他的配置项:
NETWORK: 后面内容为不缓存的内容
FALLBACK: 后面的内容为某一资源无法访问时的替代资源
如 FALLBACK:
contents/ notfound.html #指定contents/下的资源无法访问的替代资源为 notfound.html
缓存的更新:
实验使用Apache,在服务器端更新了.css文件的内容后,客户端浏览器并没有变化,因为客户端决定是否更新缓存是根据缓存列表文件是否有变化来更新的,缓存列表没有变化,即使文件内容发生变化,仍然不会重新缓存,在此时,可以通过对注释部分的版本号进行改变,来使得客户端重新更新。
当客户端访问时,先根据缓存文件显示页面,然后重新更新缓存文件,所以需要在下一次重新访问页面时,页面内容才会发生变化,要精确控制缓存更新的时机,需要使用后面的Application API。
applicationCache.onupdateready = function(){ var ok = confirm('有新版本,是否更新?'); if(ok) location.reload(); }