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. Unity性能优化之Draw Call(转)

    Unity(或者说基本所有图形引擎)生成一帧画面的处理过程大致可以这样简化描述:引擎首先经过简单的可见性测试,确定摄像机可以看到的物体,然后把这些物体的顶点(包括本地位置.法线.UV等),索引(顶点如 ...

  2. Docker Swarm——集群管理

    前言 之前在总结docker machine的时候,当时对docker理解还不够深入,甚至还不知道 docker machine 与 docker swarm 的区别. 在查阅资料以及官方文档之后,今 ...

  3. Hive desc

    Describe Database hive> DESCRIBE DATABASE test; test ??? hdfs://ns1/user/hive/warehouse/test.db w ...

  4. Centos6.5 虚拟机Mongodb创建副本集

    简单副本集的搭建 官方demo的最小化的副本集为Three Member Sets,一个primary和两个secondary.我们先就搭建一个这样的测试环境. 首先建立三个数据目录和日志目录: cd ...

  5. pandas category数据类型

    实际应用pandas过程中,经常会用到category数据类型,通常以string的形式显示,包括颜色(红,绿,蓝),尺寸的大小(大,中,小),还有地理信息等(国家,省份),这些数据的处理经常会有各种 ...

  6. [分布式系统学习] 6.824 LEC3 GFS 笔记

    Google File System 第三课的准备是阅读论文GFS.该论文是分布式系统中经典论文之一. 读完做一点小总结. GFS的feature 1. 非POXIS接口API,支持对文件和文件夹的创 ...

  7. HDU 2602 - Bone Collector - [01背包模板题]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2602 Many years ago , in Teddy’s hometown there was a ...

  8. XTU 1267 - Highway - [树的直径][2017湘潭邀请赛H题(江苏省赛)]

    这道题可能有毒……总之一会儿能过一会儿不能过的,搞的我很心烦…… 依然是上次2017江苏省赛的题目,之前期末考试结束了之后有想补一下这道题,当时比较懵逼不知道怎么做……看了题解也不是很懂……就只好放弃 ...

  9. Django实现电影论坛

    主要实现功能: 注册,登陆,发帖,评论帖子,xadmin实现后台提供帖子管理,板块管理等等 首页(搜索,筛选) 发布帖子 帖子详情页(显示帖子具体内容,提供评论) 个人信息页面(显示个人信息,修改个人 ...

  10. sql中把字符串转化为数字的方法

    1. convert(int,字段名) 2. cast(字段名 as int)