html5 manifest 离线缓存

转于：https://blog.csdn.net/lijc_boke/article/details/69666021

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

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

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

<meta manifest = ‘demo.appcache’> // 这个文件格式是官方推荐的

这里，若遇到如此报错

 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文件中配置的新内容进行缓存。

查看：

670E294B-9EB2-48F9-9C1B-4885FD7AD37E.png

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

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

问题！

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

<meta manifest=‘demo.appcache'>

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

解决方案：

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

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

html5 manifest 离线缓存

猜你喜欢