• 技术文章 >web前端 >前端问答

    html5支持离线应用吗

    青灯夜游青灯夜游2022-08-01 17:57:19原创148

    html5支持离线应用。离线应用是html5新增的特性,利用本地缓存机制,使得用户可以在网页或应用在没有网络的情况下依然可以使用。为了能够让Web应用程序在离线状态的时候也能正常工作,必须把所有构成Web应用程序的资源文件,诸如HTML文件,CSS文件,JavaScript脚本文件放在本地缓存中,这样当服务器没有和网络连接时,也可以利用本地缓存中的资源文件来正常运行应用程序。

    本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

    HTML5新增了离线应用,利用本地缓存机制,离线应用使得我们可以在网页或应用在没有网络的情况下依然可以使用。当客户端本地与web应用程序的服务器没有建立连接时,也能正常在客户端本地使用该web应用程序进行有关操作。

    为了能够让Web应用程序在离线状态的时候也能正常工作,必须把所有构成Web应用程序的资源文件,诸如HTML文件,CSS文件,JavaScript脚本文件放在本地缓存中,当服务器没有和网络连接时,也可以利用本地缓存中的资源文件来正常运行Web应用程序。

    离线应用的使用需要以下几个步骤:

    使用HTML5离线web应用

    1、检查浏览器的支持情况的方法

      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'>

    开发离线应用的第一步就是检测设备是否离线

      if(navigator.onLine){      //联网  }else{      //离线  }

    ** 注:IE6及以上浏览器及其他标准浏览器都支持这个属性 **

    当网络从离线变为在线的时候触发该事件,在window上触发该事件,不需要刷新

     window.online = function(){        //需要触发的事件    }
    window.offline = function(){      //需要触发的事件  }

    应用缓存

    应用缓存(Application Cache)是从浏览器的缓存中分出来的一块缓存区(大小根据具体浏览器而定,一般是5M)

    应用缓存和网页缓存的区别:

    应用缓存的优势

    一个web应用首次下载并缓存之后,任何加载请求都优先来自于缓存,因此可以实现离线缓存。如果不需要使用离线缓存了,就需要在服务器端删除描述文件,或者删除HTML页面中的manifest属性。

    一旦应用被缓存,则缓存始终不变。那么,怎样才能改变缓存

    如果服务器上的文件有所修改的话,那么修改描述文件中注释行的日期或者版本号是一个不错的使浏览器重新缓存文件的办法

    此外,我们还可以使用HTML5提供的API来操作和更新缓存

    applicationCache API

    applicationCache API是一个操作应用缓存的接口。新的window.applicationCache对象可以触发一系列与缓存状态相关的事件。
    这个对象有一个status属性,值为常量,表示缓存状态

    这个对象有以下事件,表示其状态的改变

    一般来讲,这些事件会随着页面加载按上述顺序依次触发

    update()方法

    通过update()方法也可以手工干预,让应用缓存为检查更新而触发上述事件

        applicationCache.update();

    update()一经调用,应用缓存就会去检查描述文件是否更新,触发checking事件,然后页面就会像刚刚加载一样,继续执行后续操作。如果触发了cached事件,则说明应用缓存已经准备就绪,不会再发生其他操作。

    swapCache()方法

    如果触发了updateready事件,则说明新版本的应用缓存已经可用,需要调用swapCache()方法来启用新的应用缓存。

        applicationCache.onupdateready = function(){
            applicationCache.swapCache();
        };

    浏览器检查清单文件,以及更新缓存的操作是异步的,因此可能是在载入旧缓存之后进行,因此可能需要载入两次才能显示最新的内容,因此需要提示用户

        window.applicationCache.onupdateready = function(){
            var con = comfirm('有新内容可用,是否重新加载?');
            if(con){
                location.reload();
            }
        }

    相关推荐:《html视频教程

    以上就是html5支持离线应用吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:离线应用 html5
    上一篇:bootstrap的模态框在哪是什么 下一篇:bootstrap与jquery是什么关系
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• html5支持wmv格式吗• HTML5中WAS是什么意思• css和html5是什么• html5自定义属性什么用• HTML5包含哪两种标签• html5不能换行的标签• jq怎么移除html5属性
    1/1

    PHP中文网