zoukankan      html  css  js  c++  java
  • HTML5 离线缓存

        先需求分析一下---传统的web应用是在线应用,这其实也是web的特色,对于PC时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得更低。比如:在火车上,穿山越岭进隧道,便无法访问web应用。。。因此出现了离线缓存技术

     离线缓存为应用带来3个优势,第一:离线浏览,用户可以再无网络是浏览;第二:速度快,已经缓存的资源加载更快;第三:减少服务器压力;还等什么快学习缓存。

    1.浏览器对离线缓存并不是都支持的,总有几个不想显示你缓存的文件,所以要先检测浏览器和离线缓存八字合不合~

       检测方案:if(window.applicationCache)

                    {//浏览器支持离线缓存}

                    else

                    {//浏览器不支持离线缓存}//IE不支持

    2.不同的服务器环境配置不同,在服务器中MIME配置文件中增加manifest文件类型,我使用的是APCHE2.4.9,就这版服务器进行配置。。。。

              按此C:wampinapacheapache2.4.9conf路径,找到httpd.conf文件,打开后将如下代码           

              AddType text/cache-manifest .manifest
              AddType text/cache-manifest .appcache

            加入到

        这样就可以放心使用离线缓存啦,6的飞起。。。。

    3.下面正式进入离线缓存代码的学习

     (1)  创建一个后缀名为manifest的文件(或appcache),并在页面中引入,

      (2)接下来创建此manifest文件,先来看一下结构

             manifest文件结构:

             CACHE MANIFEST(必须)
             # 第一行必须为CACHE MANIFEST
             # v1.0.0
             CACHE:(必须)
             # 缓存文件
             如test.css,或一张图片的路径(来自网络)http://img4.duitang.com/uploads/item/201407/14/20140714122325_sjTrX.jpeg
             NETWORK:(可选)
             # 不缓存文件
             test2.css
             FALLBACK:(可选)
            # 页面无法访问时
              test2.css 404.html

          各行的特点:

          CACHE:

         # 在此标题下列出的文件将在首次下载后进行缓存

          NETWORK:
         # 在此标题下列出的文件需要与服务器连接,不会被缓存
         FALLBACK:
         # 在此标题下列出的文件规定当页面无法访问时的回退页

         单行注释:#开头

       例如我要离线缓存网站的一张图片:

        

       manifest文件

        

     这样就能成功离线一张图片啦

    4.基本流程

      

    5.可以看出离线缓存也是有实时更新检测

      可以用如下事件进行监听,但第一次加载还会是原来的版本

      (1)update():检测更新manifest文件

      

     (2)updateready事件:当有新的缓存,并更新完以后,会触发此事件

      window.applicationCache.addEventListener('updateready',function(){

       alert('更新完成')
       },false);

    (3)swapCache方法:用来执行本地缓存的更新操作,触发updateready事件时调用swapCache方法

      window.applicationCache.addEventListener('updateready',function(){
          window.applicationCache.swapCache();
        },false);

    (4)progress事件:当有新的缓存,并处于正在下载的过程中时,会不断触发此事件

           

      是不是不知道,applicationCache.status是个什么玩意儿?下看!

          applicationCache.status 本地缓存的状态

          0 === 未缓存
          1 === 空闲(缓存为最新状态)
          2 === 检查中
          3 === 下载中
          4 === 更新就绪
          5 === 缓存过期

    如有错误欢迎指正~~

    ==================the end  ========================================

  • 相关阅读:
    在生成安装和部署项目时出现“Unrecoverable Build Error”(不可恢复的生成错误)错误信息
    SqlHelper(带详细中文注释)
    原创企业级控件库之大数据量分页控件
    MSSql技巧之快速得到表的记录总数
    ASP.NET 程序中常用的三十三种代码
    团队项目开发"编码规范"系列文章
    信息系统项目管理系列之二:项目生命期和组织
    原创企业级控件库之组合查询控件
    C# 中的常用正则表达式总结
    asp.net页面生存周期
  • 原文地址:https://www.cnblogs.com/lyn940208/p/5994774.html
Copyright © 2011-2022 走看看