html5 manifest 离线缓存

**干什么用的?
**
离线缓存为的是第一次请求后,根据manifest文件进行本地缓存,并且在下一次请求后进行展示(若有缓存的话,无需再次进行请求而是直接调用缓存),最根本的感觉是它使得WEB从online可以延伸到了offline领域。

应用场景
h5游戏及一些页面内容不经常会变动,相对较为固定的内容。

怎么用的?
若想使用manifest功能,需要在需要进行缓存功能的html文件之中写入 声明

 // 这个文件格式是官方推荐的

这里,若遇到如此报错

 Application Cache Error event: Manifest fetch failed (404)

其原因是因为 manifest文件需要正确的配置MIME-type(描述该消息的媒体类型),即
“text/cache-manifest”,必须在服务器端进行配置。

manifest文件如何进行配置?

首先manifest分为三个部分

1、CACHE MANIFEST //指出需要进行manifest的文件,此文件将会在首次下载后被缓存下来

CACHE MANIFESTCACHE:/index.css/index.html/index.js

2、NETWORK //指出需要向服务器请求即不需要manifest的文件,此文件不会被缓存,若为*则表示所有文件均需要进行网络请求,而不使用缓存。

NETWORK:*

3、FALLBACK //指出当页面无法进行访问时,显示的页面(替换的页面),例子中,当html5文件夹中的文件出现异常情况,,使用404.html页面替换掉异常页面 (第一个uri路径是资源地址,第二个是备胎地址)

FALLBACK:/html5/ /404.html

完整的实例

CACHE MANIFEST# 2017-04-06 v1.0.0
CACHE:/theme.css/logo.gif/main.js
NETWORK:login.asp
FALLBACK:/html5/ /404.html

注意:这里的版本号,是我们人为规定的,而非是manifest自带的属性,当每一次html加载到manifest时,会对manifest配置文件进行脏检查,当检测到manifest文件被修改后,之前的缓存将会被弃用,转而去根据manifest文件中配置的新内容进行缓存。

查看:

html5 manifest 离线缓存_第1张图片
670E294B-9EB2-48F9-9C1B-4885FD7AD37E.png

被缓存的文件可以使用谷歌浏览器进行查看: f12 -> Application -> Application Cache

ftchinese 手机版使用了离线缓存技术,可以去看下其源码以及缓存的文件是如何进行存储的

问题!

manifest除了缓存manifest.appcache文件所指定的资源外,还必定会缓存当前的html页面,即


标签所在的页面以及demo.appcache文件里面所规定的静态资源一并存入 application Cache 之中。
当用户再一次访问该页面时,demo.appcache文件之中CACHE MANIFEST所指向的资源就不需要重新进行加载了,但是问题是,当前的html页面也会跟着cache直接读出来了,可能会造成即使 我们的页面更新了,但是用户还是看的老旧版本页面(因为更新mainfest的时候,页面加载已经开始了,但是缓存更新却尚未完成,浏览器还是会使用缓存的资源,当浏览器检测到了Application Cache有更新时,本次不会使用新的资源,下一次才会进行使用)

解决方案:

applicationCache.addEventListener("updateready",function(){
applicationCache.swapCache();      // 手工更新本地缓存
location.reload();    //重新加载页面页面
},true);````

添加事件监听,当监听到本地缓存更新后,进行重载页面,以达到更新的目的。

****

**写在最后:**

**这是本人第一篇,文笔难免稚嫩,希望各位前辈能够不吝批评与建议,祝各位工作顺利。**




你可能感兴趣的:(html5 manifest 离线缓存)