在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机 器上的缓存文件。
原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术), 通过这个文件上的解析清单离线存储资源,这些资源就会像cookie 一样被存储了下来。之后 当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。
如何使用:
创建一个和html同名的manifest文件,然后在页面头部像下面一样加入一个manifest的 属性。
在如下cache. manifest文件的编写离线存储的资源。
CACHE MANIFEST
#v0.11
CACHE:
js/app. js
css/style. css
NETWORK:
resourse/logo. png
FALLBACK:
/ /offline. html
CACHE:表示需要离线存储的资源列表,由于包含manifest文件的页面将被自动离线存储,所以不需要把页面 自身也列出来。
NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问,他们不会被离线存储,所以在离线情况下 无法使用这些资源。不过,如果在CACHE和NETWORK中有一个相同的资源,那么这个资源还是会被离线存储, 也就是说CACHE的优先级更高。
FALLBACK:表示如果访问第一个资源失败,那么就使用第二个资源来替换他,比如上面这个文件表示的就是如果 访问根目录下任何一个资源失败了,那么就去访问offline.html 。
在离线状态时,操作window. applicationCache进行离线缓存的操作。
如何更新缓存:
1、 更新manifest文件
2、 通过javascript操作
3、 清除浏览器缓存
注意事项:
1、 浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点5MB) „
2、 如果manifest文件,或者内部列举的某一个文件不能正常下载,整个更新过程都将失败, 浏览器继续全部使用老的缓存。
3、 引用manifest的html必须与manifest文件同源,在同一个域下。
4、 FALLBACK中的资源必须和manifest文件同源。
5、 当一个资源被缓存后,该浏览器直接请求这个绝对路径也会访问缓存中的资源。
6、 站点中的其他页面即使没有设置manifest属性,请求的资源如果在缓存中也从缓存中访 问。
7、当manifest文件发生改变时,资源请求本身也会触发更新。
Was this helpful?
0 / 0