所属分类：web前端开发
html5支持离线应用。离线应用是html5新增的特性，利用本地缓存机制，使得用户可以在网页或应用在没有网络的情况下依然可以使用。为了能够让Web应用程序在离线状态的时候也能正常工作，必须把所有构成Web应用程序的资源文件，诸如HTML文件，CSS文件，JavaScript脚本文件放在本地缓存中，这样当服务器没有和网络连接时，也可以利用本地缓存中的资源文件来正常运行应用程序。
前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用
本教程操作环境：windows7系统、HTML5版、Dell G3电脑。
HTML5新增了离线应用，利用本地缓存机制，离线应用使得我们可以在网页或应用在没有网络的情况下依然可以使用。当客户端本地与web应用程序的服务器没有建立连接时，也能正常在客户端本地使用该web应用程序进行有关操作。
为了能够让Web应用程序在离线状态的时候也能正常工作，必须把所有构成Web应用程序的资源文件，诸如HTML文件，CSS文件，JavaScript脚本文件放在本地缓存中，当服务器没有和网络连接时，也可以利用本地缓存中的资源文件来正常运行Web应用程序。
离线应用的使用需要以下几个步骤：
离线检测（确定是否联网）
访问一定的资源
有一块本地空间用于保存数据（无论是否上网都不妨碍读写）
1、检查浏览器的支持情况的方法
微博登录
QQ登录 if(window.applicationCache){
//浏览器支持离线应用
}登录后复制2、关于描述文件
描述文件用来列出需要缓存和不需要缓存的资源，以备离线时使用。
描述文件的扩展名以前用.manifest，现在推荐使用.appcache，并且描述文件需要配置正确的MIME-type，即"text/cache-manifest"，必须在web服务器上进行配置（文件编码必须是UTF-8）。不同的服务器有不同的配置方法，具体这里不详述。
首行必须以以下字符串开始
CACHE MANIFEST
登录后复制剩下的就是要缓存的文件的URL，一行一个（相对URL是相对于清单文件而言的，不是相对于文件）
#以“#”开头的是注释
common.css
common.js登录后复制这样这个文件中列举的所有的文件都会被缓存
在清单中，可以使用特殊的区域头来标识头信息之后的清单项的类型，上面的最简单的缓存属于"CACHE:"区域。
像这样
#该头信息之后的内容需要缓存 CACHE:
common.css
connom.js登录后复制以"NETWORK:"开头的区域列举的文件，总是从线上获取，不缓存
NETWORK:头信息支持通配符"*",表示任何未明确列举的资源，都将通过网络加载
#该头信息之后的内容不需要缓存，总是从线上获取
NETWORK:
a.css
#表示以name开头的资源都不要缓存
name/登录后复制以"FALLBACK:"开头的区域中的内容，提供了获取不到缓存资源时的备选资源路径
该区域中的内容，每一行包含两个URL（第一个URL是一个前缀，任何匹配的资源都不被缓存，第二个URL表示需要被缓存的资源）
FALLBACK:
name/ example.html登录后复制一个清单可以有任意多个区域，且位置没有限制。
3、搭建离线应用程序
假设我们要构建一个包含css，js，html的单页应用，同时要为这个单页应用添加离线支持。
要将描述文件与页面关联起来，需要使用html标签的manifest特性指定描述文件的路径
<html manifest='./offline.appcche'>
登录后复制开发离线应用的第一步就是检测设备是否离线
HTML5新增了navigator.onLine属性
当该属性为true的时候表示联网，值为false的时候，表示离线
if(navigator.onLine){ //联网 }else{ //离线 }登录后复制** 注：IE6及以上浏览器及其他标准浏览器都支持这个属性 **
当网络从离线变为在线的时候触发该事件，在window上触发该事件，不需要刷新
window.online = function(){ //需要触发的事件 }登录后复制offline事件（IE9+浏览器支持）
当网络从在线变为离线的时候触发该事件，和online事件一样，在window上触发该事件，不需要刷新
window.offline = function(){ //需要触发的事件 }登录后复制应用缓存（Application Cache）是从浏览器的缓存中分出来的一块缓存区（大小根据具体浏览器而定，一般是5M）
应用缓存和网页缓存的区别：
应用缓存的优势
一个web应用首次下载并缓存之后，任何加载请求都优先来自于缓存，因此可以实现离线缓存。如果不需要使用离线缓存了，就需要在服务器端删除描述文件，或者删除HTML页面中的manifest属性。
一旦应用被缓存，则缓存始终不变。那么，怎样才能改变缓存
如果服务器上的文件有所修改的话，那么修改描述文件中注释行的日期或者版本号是一个不错的使浏览器重新缓存文件的办法
此外，我们还可以使用HTML5提供的API来操作和更新缓存
applicationCache API是一个操作应用缓存的接口。新的window.applicationCache对象可以触发一系列与缓存状态相关的事件。
这个对象有一个status属性，值为常量，表示缓存状态
这个对象有以下事件，表示其状态的改变
一般来讲，这些事件会随着页面加载按上述顺序依次触发
通过update()方法也可以手工干预，让应用缓存为检查更新而触发上述事件
applicationCache.update();
登录后复制update()一经调用，应用缓存就会去检查描述文件是否更新，触发checking事件，然后页面就会像刚刚加载一样，继续执行后续操作。如果触发了cached事件，则说明应用缓存已经准备就绪，不会再发生其他操作。
如果触发了updateready事件，则说明新版本的应用缓存已经可用，需要调用swapCache()方法来启用新的应用缓存。
applicationCache.onupdateready = function(){
applicationCache.swapCache();
};登录后复制浏览器检查清单文件，以及更新缓存的操作是异步的，因此可能是在载入旧缓存之后进行，因此可能需要载入两次才能显示最新的内容，因此需要提示用户
window.applicationCache.onupdateready = function(){
var con = comfirm('有新内容可用，是否重新加载？');
if(con){
location.reload();
}
}登录后复制相关推荐：《html视频教程》
以上就是html5支持离线应用吗的详细内容，更多请关注zzsucai.com其它相关文章！
