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. 利用bat批处理做启动mongodb脚本

    文章开始,我们先回顾一下,如何用cmd命令窗口开启mongodb数据库,命令如下: 开启mongodb数据库 cd D:\Program Files\MongoDB\bin mongod --depa ...

  2. layerui如何隐藏按钮？

    https://www.layui.com/doc/modules/layer.html#btn 建议把 btn: ['取消'],btnAlign: 'c',yes: function (index) ...

  3. 优秀的第二外语学习网站：Lang-8

    想要找native speaker帮你提高自己的写作能力么? 目前了解到的这方面最好的网站:http://lang-8.com 在这个网站上,你可以随便写一些句子或文章,然后就会有native spe ...

  4. Python 之反射和普通方式对比（模拟Web框架）

    先模拟一个web页面的选择不同输出不同 vim day8-7.py #!/usr/bin/python # -*- coding:utf-8 -*- import home import accoun ...

  5. 2018No-java面试知识

    1.框架 1. springboot比spring的优点? 2. Springmvc的基本流程? 3. 微服务之间调用不会慢吗? 4. 大图片和大数据库怎么存储? 5. spring事物?四大特征, ...

  6. 它是对 ACME(automated certificate management environment) 协议的实现，只要实现了 ACME 协议的客户端都可以跟它交互。

    它是对 ACME(automated certificate management environment) 协议的实现,只要实现了 ACME 协议的客户端都可以跟它交互. https://mp.we ...

  7. maven配置(myeclipse版)

    使用环境说明: OS:windows 7 64位 java version: "jdk1.8.0_66" IDE:myeclipse 2017 1.下载 下载地址:http://m ...

  8. sql根据某一个字段重复只取第一条数据

    比如上图,取3,4行记录的第一行也就是3行,而不返回4行. 使用分析函数row_number() over (partiion by ... order by ...)来进行分组编号,然后取分组标号值 ...

  9. Jena 操作 RDF 文件

    1. RDF 入门 RDF(Resource Description Framework)是由W3C规定的,描述资源(resource)的数据模型(data model),: RDF 使用Web标识符 ...

  10. LightOj 1118 - Incredible Molecules（两圆的交集面积）

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1118 给你两个圆的半径和圆心,求交集的面积: 就是简单数学题,但是要注意acos得到的 ...