一、应用场景
我们通常使用浏览器缓存在用户磁盘上存储web单页,在用户再次浏览的时候已节省带宽,但即便这样,依然无法在没有Internet的情况下访问Web。为了让web应用程序在离线状态也能被访问。html5通过application cache API提供离线存储功能。前提是你需要访问的web页面至少被在线访问过一次。
离线本地存储和传统的浏览器缓存有什么不同呢?
1、浏览器缓存主要包含两类:
a.缓存协商:Last-modified,Etag
浏览器向服务器询问页面是否被修改过,如果没有修改就返回304,浏览器直接浏览本地缓存文件。否则服务器返回新内容。
b.彻底缓存:cache-control,Expires
通过Expires设置缓存失效时间,在失效之前不需要再跟服务器请求交互。
2、离线存储为整个web提供服务,浏览器缓存只缓存单个页面;
3、离线存储可以指定需要缓存的文件和哪些文件只能在线浏览,浏览器缓存无法指定;
4、离线存储可以动态通知用户进行更新。
二、如何实现
离线存储是通过manifest文件来管理的,需要服务器端的支持,不同的服务器开启支持的方式也是不同的。
CACHE MANIFEST//必须以这个开头version 1.0 //最好定义版本,更新的时候只需修改版本号CACHE:
m.png
test.js
test.css
NETWORK:
*
FALLBACK
online.html offline.html
CACHE指定需要缓存的文件;NETWORK指定只有通过联网才能浏览的文件,*代表除了在CACHE中的文件;FALLBACK每行分别指定在线和离线时使用的文件
要让manifest管理存储,还需要在html标签中定义manifest属性,如下: