1.最大缓存容量为 5M.

2.manifest文件需要配置正确的MIME-type，即“text/cache-manifest”，这个是在web服务器上进行配置。

②编写.manifest文件，文件名可自定义，例如hahaha.manifest

CACHE MANIFEST(声明头部文件，必须大写)

CACHE:(这里写需要缓存的文件，例如js、css、img)

js/index.js

css/index.css

img/aaa.jpg

NETWORK(需要网络调用的文件，大写)

*

FALLBACK (在此标题下，列出的文件规定页面无法访问的回退页面)

404.xml

　　

③编写HTML文件（.manifest文件和HTML页面同级）

<!doctype html>

　　<html manifest="hahaha.manifest">（html标签里写入你的.manifest文件）

　　　　...

　　<script>（script标签里需要添加版本更新的监听）

　　　　　　applicationCache.addEventListener("updateready",function(e){

　　　　　　　　if(applicationCache.status==applicationCache.UPDATEREADY){

　　　　　　　　　　applicationCache.swapCache();//使用新版本资源

　　　　　　　　　　window.location.reload();//刷新页面

　　　　　　　　}

　　　　　　},false);

　　</script>

            ...

　　3.控制台里可以找到离线缓存的文件

二，离线缓存的有点

1.减少服务器的负载，提高资源加载速率。

2.离线浏览，方便用户在离线时使用。

缺点：

1.更新完版本后，必须刷新一次才会启动新版本。

2.进入离线存储的页面，如果不更新版本，会将其当做静态页面不请求。

3.无法进行灰度发布（即一部分人使用旧版本，一部分人使用新版本）。

4.无法增量更新

三，传统浏览器缓存的区别

1.离线缓存是针对整个应用，浏览器缓存是单个文件。

2.离线缓存断网还可以打开页面，浏览器缓存不行。

3.离线缓存可以主动通知浏览器更新资源。

html5 manifest 离线缓存知识点的更多相关文章

  1. HTML5 manifest离线缓存

    一.基本概念 离线缓存是HTML5新引入的技术,能够让你的Web应用程序指定哪些文件可以缓存在本地,使得你的网络断开时依然可以通过本地的缓存来进行访问浏览. 二.使用方法 1. MIME type 声 ...

  2. HTML5 manifest离线缓存技术

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

  3. 使用html5的离线缓存技术

    突然想用html5的离线缓存,但是一直没有成功,在各种群里问发现很多人都没什么经验,最终终于在各种论坛找到解决方案了.下面就简单记录一下相关情况. 一.离线缓存的优点 我们都知道离线缓存主要是用来减少 ...

  4. html5的离线缓存

    一个离线网络应用程序就是一个URL的列表,html,css,js,图片,或者其他类型的资源. 把这些资源,在本地缓存下来,当你尝试在没有网络连接时访问网络应用程序,你的浏览器将自动切换并使用本地代替. ...

  5. H5 manifest离线缓存

    请跳转我的有道云笔记查看: http://note.youdao.com/noteshare?id=caaf067c6e38820ba8f87b212c2327a9&sub=23E0F8F7A ...

  6. node.js与HTML5离线缓存

    最近正学到HTML5的离线缓存,却看到需要配置服务器.一下子就懵了,毕竟服务器的有关配置一般是很复杂的,而node.js的服务器是自己的代码生成的,这下要怎么配置?在网上搜索了很久,都没用关于node ...

  7. HTML5离线缓存（Application Cache）

    HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...

  8. HTML5离线缓存问题

    HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...

  9. HTML5离线缓存

    参考文档:http://www.w3cschool.cc/html/html5-app-cache.html HTML5 应用程序缓存 又称离线缓存 ,即使断线了,刷新后也还是缓存了原来的页面,不会4 ...

随机推荐

  1. C语言清屏函数

    Devc++ 与VC中的清屏函数 #include<stdio.h> #include<stdlib.h>//清屏函数的头文 int main() { int i; for(i ...

  2. HDU 2089 - 不要62 - [数位DP][入门题]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2089 Time Limit: 1000/1000 MS (Java/Others) Memory Li ...

  3. Oracle管理监控之如何对数据库进行监控检查

    oracle自动工作负载库(AWR):采集与性能相关的统计数据,并从统计的数据中导出性能量度,以跟踪数据库潜在的问题. 如何生成oracle数据库的自动负载库报告. 手工生成一份oracle数据库的快 ...

  4. java内部类作用

    推荐一. 定义 放在一个类的内部的类我们就叫内部类. 二. 作用 1.内部类可以很好的实现隐藏 一般的非内部类,是不允许有 private 与protected权限的,但内部类可以 2．内部类拥有外围 ...

  5. 棋盘问题---poj1321（dfs）

    http://poj.org/problem?id=1321 由于搜索是原来写的,而集训的时候没来所以只能现在补补咯-_- 简单的深搜 #include<stdio.h> #include ...

  6. C++三大特性之继承

    原文地址:https://qunxinghu.github.io/2016/09/12/C++%20%E4%B8%89%E5%A4%A7%E7%89%B9%E6%80%A7%E4%B9%8B%E7%B ...

  7. shidebing——QandA：解决一个需求20171214

    list1 = [ {'eip': 60, 'day': '2014-7-5'}, {'etans': 96, 'day': '2014-7-5'}, {'etans': 30, 'day': '20 ...

  8. python——asyncio模块实现协程、异步编程

    我们都知道,现在的服务器开发对于IO调度的优先级控制权已经不再依靠系统,都希望采用协程的方式实现高效的并发任务,如js.lua等在异步协程方面都做的很强大. Python在3.4版本也加入了协程的概念 ...

  9. Andrew Ng-ML-第十八章-大规模机器学习

    1.学习大数据集 图1.学习大数据集 当数据集量为m=1亿时,进行梯度下降将会花费较大时间. 可以使用小量数据集进行训练,然后得出学习曲线. 左图是高方差,右图是高偏差. 总之是要通过高效的学习算法来 ...

  10. jmeter 测试websocket接口（一）

    jmeter 测试websocket接口时,需要对jmeter添加测试websocket的jar包. 下载地址: https://download.csdn.net/download/qq_14913 ...