• 技术文章 >web前端 >H5教程

    HTML5-Offline APIs的简单介绍

    黄舟黄舟2017-04-01 11:37:05原创1017

    1.浏览器支持性检测

    if
    (window.application
    Cache
    ) { 
          // this browser supports offline applications 
       }

    2.在线、离线的状态检测和事件

    // When the page loads, 
    set
     the status to online or offline 
       function loadDemo() { 
          if (navigator.onLine) { 
             log("Online"); 
          } 
    else
     { 
             log("Offline"); 
          } 
       } 
       // Now add event 
    list
    eners to notify a change in online status 
       window.addEventListener("online", function(e) { 
         log("Online"); 
       }, true); 
       window.addEventListener("offline", function(e) { 
         log("Offline"); 
       }, true);

    3.manifest
    要使用离线功能,需要指定哪些资源离线缓存,这通过<html>标记的manifest属性指定一个以.manifest为扩展名的清单文件,需要离线缓存的资源、不要缓存的资源以及失败的请求替换页都在清单文件中列出。并且,清单文件的MIME类型必须是text/cache-manifest,这个MIME类型要从服务器端进行定义。清单的第一行不能为注释
    失败请求部分包括两个方面,第一个是要请求的内容,可以为文件夹;第二个是请求失败的替换内容。
    如果需要更新缓存,只要更新清单文件,浏览器就会自动更新所有缓存。但是,前提是清单文件不被缓存(默认情况下会被缓存),可以通过修改服务器的缓存设置来解决此问题。
    示例如下:

    CACHE MANIFEST
    # 井号行为注释。下面的“CACHE:”可以省略
    CACHE:

      # 
    file
    s to cache 
       about.html 
       
    html5
    .css 
       index.html 
       happy-trails-rc.gif 
       lake-tahoe.JPG

    #do not cache signup page
    #可以使用一个星号(*),这样,所有未被显式缓存的资源都不会被缓存
    NETWORK
    signup.html

     FALLBACK 
       signup.html     offline.html 
       /app/ajax/      default.html
       media/          images/video-fallback.jpg
       /               /offline.html

    4.applicationCache对象
    window.applicationCache对象是Web离线应用API的核心对象,它包括缓存状态属性 window.applicationCache.status和一些与缓存状态相关的事件属性。

    5.缓存状态与事件
    window.applicationCache.status有六种值,如下:
    •0( UNCACHED ):对应oncached事件属性,没有缓存
    •1( IDLE ):对应oncached事件属性,所有缓存清单中的资源处于缓存状态。
    •2( CHECKING ):对应onchecking事件属性,检查缓存。
    •3( DOWNLOADING ):对应ondownloading事件属性,下载缓存。
    •4( UPDATEREADY ):对应onupdateready事件属性,准备更新缓存。
    •5( OBSOLETE ):对应onobsolete事件属性,某个资源已缓存,但清单中没有。
    另有三个事件属性:
    •onerror:产生错误。
    •onnoupdate:没有可用更新。
    •onprogress:正在更新缓存。

    6.window.applicationCache.update()方法
    调用该方法请求浏览器更新缓存,包括检查新版本的清单文件和下载必要地新资源。如果没有缓存,或缓存已废弃,则将产生错误。

    以上就是HTML5-Offline APIs的简单介绍的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:HTML5-Web Storage APIs的简述 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 重点介绍H5页面秒开优化与实践• 利用简洁的图片预加载组件提升html5移动页面的用户体验 _html5教程技巧• HTML5重塑Web世界它将如何改变互联网_html5教程技巧• 开发人员所需要知道的HTML5性能分析面面观_html5教程技巧• HTML 5标签、属性、事件及兼容性速查表
    1/1

    PHP中文网