一个离线网络应用程序就是一个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的离线缓存的更多相关文章

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

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

  2. HTML5 manifest离线缓存

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

  3. HTML5 manifest离线缓存技术

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

  4. html5 manifest 离线缓存知识点

    1.最大缓存容量为 5M. 2.manifest文件需要配置正确的MIME-type,即“text/cache-manifest”,这个是在web服务器上进行配置. ②编写.manifest文件,文件 ...

  5. node.js与HTML5离线缓存

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

  6. HTML5离线缓存（Application Cache）

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

  7. HTML5 离线缓存管理库

    一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...

  8. HTML5离线缓存问题

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

  9. HTML5离线缓存

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

随机推荐

  1. 给tkinter文本框添加右键菜单

    给tkinter文本框添加右键菜单 需求:直接右键点击使用tkinter创建的文本框是不会弹出菜单的.我们需要实现右键点击tkinter框架下的Entry对象.Text对象后弹出右键菜单可复制.粘贴和 ...

  2. MongoDB的常规备份策略

    MongoDB的备份其实算是一个基本操作,最近总是有人问起,看来很多人对这里还不太熟悉.为了避免一次又一次地重复解释,特总结成一篇博客供后来者查阅.如有不尽正确之处请指正. 1. 内建方法 1.1 复 ...

  3. 关于T-SQL中exists或者not exists子查询的“伪优化”的做法

    问题起源 在使用t-sql中的exists(或者not exists)子查询的时候,不知道什么时候开始,发现一小部分人存在一种“伪优化”的一些做法,并且向不明真相的群众传递这一种写法“优越性”,实在看 ...

  4. Android源码50例汇总，欢迎各位下载（转载）

    下载中心好资料很多,藏在各个角落,小弟在此帮大家做了一个整理,做了一个下载目录,方便大家选择性下载. 源码实例如下: <Android应用开发揭秘>源代码推荐 http://down.51 ...

  5. hibernateTemplate API

    https://docs.spring.io/spring-framework/docs/2.5.x/api/org/springframework/orm/hibernate3/HibernateT ...

  6. js获取url参数，直接获取url中文

    function GetQueryString(name)//name参数名称 { var reg = new RegExp("(^|&)"+ name +"=( ...

  7. 1.5.2、CDH 搭建Hadoop在安装之前(定制安装解决方案---使用内部包存储库)

    本主题描述如何在Cloudera Manager部署中创建内部包存储库和直接主机以使用该存储库.您可以创建永久或临时存储库. 完成这些步骤后,您可以安装特定版本的Cloudera Manager或在未 ...

  8. Navicat的外键设置

    “名”:可以不填,你一会保存成功系统会自动生成. “栏位”:这个子表哪个键设置为外键. “参考数据库”:外键关联的数据库. “参考表”:关联的父表 “参考栏位”:父表关联的的字段,一般是id “删除时 ...

  9. nutch笔记

    1.Nutch 是一个开源Java实现的搜索引擎.它提供了我们运行自己的搜索引擎所需的全部工具.包括全文搜索和Web爬虫.

  10. sqlserver 数据库迁移

    参考 https://blog.csdn.net/wuzhanwen/article/details/77449229 一.连接本地数据库引擎 新建一个数据库,如:rbrbsoft 二.连接远程数据库 ...