Html5离线缓存简介
一. 什么是manifest
首先manifest是一个后缀名为minifest的文件，在文件中定义那些需要缓存的文件，支持manifest的浏览器，会将按照manifest文件的规则，像文件保存在本地，从而在没有网络链接的情况下，也能访问页面。
当我们第一次正确配置app cache后，当我们再次访问该应用时，浏览器会首先检查manifest文件是否有变动，如果有变动就会把相应的变得跟新下来，同时改变浏览器里面的app cache，如果没有变动，就会直接把app cache的资源返回，基本流程是这样的。
二. 使用方法
1. html新增了一个manifest属性，可以用来指定当前页面的manifest文件。创建一个和html同名的manifest文件，比如页面为index.html，那么可以建一个index.manifest的文件，然后给index.html的html标签添加如下属性即可：
<html lang="en" manifest="index.manifest">
2. manifest文件，基本格式为三段： CACHE， NETWORK，与 FALLBACK，其中NETWORK和FALLBACK为可选项。
CACHE MANIFEST
#version 1.3
CACHE:
test.css
NETWORK:
*
三. 注意事项：
浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。
引用manifest的html必须与manifest文件同源，在同一个域下。
FALLBACK中的资源必须和manifest文件同源。
当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问。
当manifest文件发生改变时，资源请求本身也会触发更新。
四. 更多内容
1. 为了实现离线缓存，manifest文件必须包含该html页面的所有资源文件。
2. 通常manifest还有一个特别大的用途，就是前段页面的版本控制。
一般来说，manifest文件可能如下：
CACHE MANIFEST
NETWORK:
*
CACHE:
index.html?SIMU_PATH_VERSION
css/dahuo_core.css?CSS_VERSION
css/index.css?CSS_VERSION
css/search.css?CSS_VERSION
js/zepto.min.js?JS_VERSION
js/dahuo_core.js?JS_VERSION
js/touchslider.js?JS_VERSION
js/webtools.js?JS_VERSION
js/config.js?JS_VERSION
js/search.js?JS_VERSION
js/index.js?JS_VERSION
js/webchat.js?JS_VERSION
#images
images/droploading.gif
images/loading.gif
images/search-index-icon.png
images/guideicon9.png
images/guideicon12.png
images/guideicon11.png
images/search-new.png
images/delete-button.png
images/simu_main.png
3. 还差一步完成离线缓存页面，缓存API，数据可以缓存到localStorage
一般来说，先执行获取缓存加载页面的方法，在发送API，比较返回数据与缓存数据是否相同。实现逻辑如下：
var Main = {
init: function() {
...
this.initIndex();
this.fetchData();
},
initIndex: function() {
var self = this;
var respData = DahuoCore.getLocal(self.localKey);
if ($.type(respData) == "string") {
respData = $.parseJSON(respData);
if ($.type(respData) == "object" && respData.status == "1") {
self.processData(respData.data);
}
}
},
var self = this;
$.ajax({
url: ...,
type: "GET",
dataType: "json",
data: {
...
},
complete: function(xhr, status) {
if (status == "success") {
var resp = $.parseJSON(xhr.response);
if ($.type(resp) == "object") {
if (resp.status == 1) {
var localData = DahuoCore.getLocal(self.localKey);
var newData = JSON.stringify(resp);
if (newData !== localData) {
if (resp.data) {
DahuoCore.setLocal(self.localKey, newData);
self.processData(resp.data);
} else {
DahuoCore.toast({ "content": "加载失败" });
}
}
} else if (resp.status == 0) {
DahuoCore.toast({ "content": resp.msg });
} else {
self.ajaxErrorHandler(xhr, status);
}
}
}
DahuoCore.loading.hide();
},
timeout: 30000
});
},
processData: function(data) {
...
}
}
4. 大功告成。
but，一点点瑕疵，当manifest更新时，浏览器并没有更新到最新的网页，而是下次进来时更新。
为了解决这个问题，需要接受manifest更新事件，然后reload页面。于是：
function checkManifest() {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
window.location.reload();
}
}, false);
}
Html5离线缓存简介的更多相关文章
- HTML5 离线缓存Appcache
创建一个和html同名的manifest文件,比如页面为index.html,那么可以建一个index.manifest的文件,然后给index.html的html标签添加如下属性即可: <ht ...
- HTML5离线缓存（Application Cache）
HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...
- HTML5 离线缓存管理库
一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...
- HTML5离线缓存问题
HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...
- html5离线缓存使用
html5 离线缓存使用以及注意事项 1.index.html中加入离线缓存的声明文件 如:<!DOCTYPE html><html manifest="test.appc ...
- node.js与HTML5离线缓存
最近正学到HTML5的离线缓存,却看到需要配置服务器.一下子就懵了,毕竟服务器的有关配置一般是很复杂的,而node.js的服务器是自己的代码生成的,这下要怎么配置?在网上搜索了很久,都没用关于node ...
- HTML5离线缓存攻击测试
本实验采用局域网模拟,通过修改本地HOSTS文件来模拟域名以及DNS欺骗.合法网站使用Linux CentOS7的apache服务器搭建,IP为192.168.1.113,HOSTS文件中加入192. ...
- HTML5离线缓存
参考文档:http://www.w3cschool.cc/html/html5-app-cache.html HTML5 应用程序缓存 又称离线缓存 ,即使断线了,刷新后也还是缓存了原来的页面,不会4 ...
- Html5离线缓存详细讲解
离线缓存是Html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用.当然,Html5新的特性都不是所有浏览器都能支持的 ...
随机推荐
- 一行python能做什么!
主要收集了平常遇到的代码和网上的简单题目,然后尝试将代码压缩到一行,仅仅是娱乐一下~~~ −−−−−(1)−−−−−−−−−−−(1)−−−−−− 用一行python写出一个嵌套的字符串. def p ...
- 17 C#中的循环执行 while循环
在编程中有代码的执行主要有三种方式.(1)顺序执行,也就是一条语句一条语句按顺序执行:(2)条件执行,也就是if...else.当某种条件满足时执行一些代码:(3)循环执行,就是当某种条件满足的时候, ...
- jQuery学习笔记(2)-选择器的使用
一.选择器是什么 有了jQuery的选择器,我们几乎可以获取页面上任意一个或一组对象 二.Dom对象和jQuery包装集 1.Dom对象 JavaScript中获取Dom对象的方式 <div i ...
- hihocoder1365 图片排版
思路: 模拟,枚举,dp. 参考了https://github.com/buptlxb/hihoCoder/blob/master/solutions/1365/picture_arrange.cpp ...
- Elasticsearch--地理搜索
目录 地理位置索引 空间搜索映射定义 示例 基于距离的排序 边界框过滤 距离的限制 任意地理形状搜索 点 包络线 多边形 多个多边形 把形状保存到索引中 地理位置索引 空间搜索映射定义 elastic ...
- [算法天天练] - C语言实现双向链表(一)
双向链表是比较常见的,主要是在链表的基础上添加prev指针,闲话少说直接上代码吧(这个也是网上一个大神的思路,真心不错,条理清楚,逻辑缜密) 主要也是为了学习,贴上我所调试成功的代码(Linux环境下 ...
- AI：IPPR的数学表示-CNN稀疏结构进化（Mobile、xception、Shuffle、SE、Dilated、Deformable）
接上一篇:AI:IPPR的数学表示-CNN基础结构进化(Alex.ZF.Inception.Res.InceptionRes). 抄自于各个博客,有大量修改,如有疑问,请移步各个原文..... 前言 ...
- golang zip 压缩，解压（含目录文件）
每天学习一点go src. 今天学习了zip包的简单使用,实现了含目录的压缩与解压. 写了两个方法,实现了压缩.解压. package ziptest import ( "archive/z ...
- Java学习4_一些基础4_输入输出_16.5.7
读取输入: 想从控制台进行输入,首先需要构造一个Scanner对象,并与“标准输入流”System.in关联. Scanner in=new Scanner(System.in); String na ...
- SDK_按键消息的拦截
按键消息的拦截 拦截是为了在原有功能的基础上增加自己的操作 扩展:当按钮接收到点击消息的时候,响应的是WM_LBUTTONDOWN消息,按钮的会被这个消息打包成一个WM_COMMAND 消息发送给父窗 ...