html5的离线缓存
一个离线网络应用程序就是一个URL的列表,html,css,js,图片,或者其他类型的资源。
把这些资源,在本地缓存下来,当你尝试在没有网络连接时访问网络应用程序,你的浏览器将自动切换并使用本地代替。
1、服务器端配置
需要在apache配置文件加:AddType text/cache-manifest .manifest,并重启服务器。
2、manifest文件,格式如下
#这一句必须存在,而且必须放在头部
CACHE MANIFEST
#指明要缓存的内容
CACHE
#指定无需缓存的文件
NETWORK
#这个声明,允许你在资源不可用的情况下,将用户重定向到特定文件
FALLBACK
创建res.manifest如下:
CACHE MANIFEST
CACHE:
test.html
test.css
test.js
NETWORK:
test.jpg
FALLBACK:
3、在html标签添加属性manifest
<!DOCTYPE html>
<html lang="en" manifest="res.manifest">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./test.css">
<script src="test.js"></script>
</head>
<body>
<img src="test.jpg" alt="">
</body>
</html>
重新联网后,html内容改变,但页面仍没有变化,因为默认优先使用缓存,修改manifest文件,刷新就可以。
html5提供了两种检测是否在线的方式:
navigator.onLine和online/offline事件。
1、navigator.onLine属性表示当前是否在线。
2、开发者还需要在网络状态发生变化时立刻得到通知,所以提供了online/offline事件。
applicationCache属性,事件,方法API,慎用。
html5的离线缓存的更多相关文章
- 使用html5的离线缓存技术
突然想用html5的离线缓存,但是一直没有成功,在各种群里问发现很多人都没什么经验,最终终于在各种论坛找到解决方案了.下面就简单记录一下相关情况. 一.离线缓存的优点 我们都知道离线缓存主要是用来减少 ...
- HTML5 manifest离线缓存
一.基本概念 离线缓存是HTML5新引入的技术,能够让你的Web应用程序指定哪些文件可以缓存在本地,使得你的网络断开时依然可以通过本地的缓存来进行访问浏览. 二.使用方法 1. MIME type 声 ...
- HTML5 manifest离线缓存技术
干什么用的? 离线缓存为的是第一次请求后,根据manifest文件进行本地缓存,并且在下一次请求后进行展示(若有缓存的话,无需再次进行请求而是直接调用缓存),最根本的感觉是它使得WEB从online可 ...
- html5 manifest 离线缓存知识点
1.最大缓存容量为 5M. 2.manifest文件需要配置正确的MIME-type,即“text/cache-manifest”,这个是在web服务器上进行配置. ②编写.manifest文件,文件 ...
- node.js与HTML5离线缓存
最近正学到HTML5的离线缓存,却看到需要配置服务器.一下子就懵了,毕竟服务器的有关配置一般是很复杂的,而node.js的服务器是自己的代码生成的,这下要怎么配置?在网上搜索了很久,都没用关于node ...
- HTML5离线缓存(Application Cache)
HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...
- HTML5 离线缓存管理库
一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...
- HTML5离线缓存问题
HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...
- HTML5离线缓存
参考文档:http://www.w3cschool.cc/html/html5-app-cache.html HTML5 应用程序缓存 又称离线缓存 ,即使断线了,刷新后也还是缓存了原来的页面,不会4 ...
随机推荐
- Kotlin语言编程技巧集
空语句 Kotlin 语言中的空语句有 {} Unit when (x) { 1 -> ... 2 -> ... else -> {} // else -> Unit } Wh ...
- mysql explain预估剖析
http://www.cnblogs.com/LBSer/p/3333881.html 引子: 使用MySQL建立了一张表country,总共有才3121行记录. 但是使用explain select ...
- 7.final关键字.md
1.final类型变量 定义:被final修饰的变量,一旦被赋初值后,则final类型变量的值就不能再改变. 1.1成员变量 final修饰的成员变量必须显式的赋初值. 赋值的位置: •类变量:静态初 ...
- JAVAWEB 一一SpringMVC(XML配置)
web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version="2 ...
- MVC 中Controller返回值类型ActionResult
下面列举Asp.net MVC中Controller中的ActionResult返回类型 1.返回ViewResult视图结果,将视图呈现给网页 public ActionResult About() ...
- vue 解决页面闪烁问题
watch: { //监听表格数据的变化[使用 watch+nextTick 可以完成页面数据监听的 不会出现闪烁] tableData: { //深度监听,可监听到对象.数组的变化 handler( ...
- 百度地图API自动定位和3种导航
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- EVIL TWIN AP
git clone https://github.com/P0cL4bs/3vilTwinAttacker.git cd 3vilTwinAttacker/ ./installer.sh --inst ...
- google翻译插件安装
来源:http://www.cnplugins.com/tools/how-to-setup-crx.html 1. 下载: 2.拖拽: 3.下一步安装 4.完成.
- 如何更改Oracle字符集避免乱码
转一位大神的笔记. 国内最常用的Oracle字符集ZHS16GBK(GBK 16-bit Simplified Chinese)能够支持繁体中文,并且按照2个字符长度存储一个汉字.UTF8字符集是多字 ...