zoukankan      html  css  js  c++  java
  • html5的离线储存应用.

    Html5离线应用可以让用户在断网的情况下正常浏览网页,节约带宽,减轻服务器压力.

    Html5离线应用需要编写一个以manifest为扩展名的网页文本文件,里面写的内容是离线应用的文件清单.

    文件内容以CACHE MANIFEST为首行开始

    # 为注释    注释的作用:Web应用的缓存只有在manifest文件被修改的情况下才会被更新,利用更新注释通过修改manifest文件不告诉浏览器需要更新缓存

    清单文件中有三个重要的关键词:

    1 1 : CACHE    #指明manifest文件的入口
    2 
    3 2 : NETWORK:这部分的文件是需要访问网络的。
    4 
    5 3 : FALLBACK 当缓存第一个资源的时候没有回应的情况下,可以让其缓存备访问资源文件
    6 /app/ajax    default.html     #当无法获取app/ajax时,所有对app/ajax/及其子路径的请求都会被转发给default.html

    例子:

     1 CACHE MANIFEST
     2 
     3 #blog
     4 
     5 Index.html  # 你需要缓存的网页文件
     6 
     7 Js/bootstrap.js
     8 
     9 Css/jquery.min.css
    10 
    11 Css/style.css
    12 
    13 Images/bg.png
    14 
    15 ………
    16 
    17 FALLBACK
    18 
    19 /app/ajax  default.html

    当写好了缓存文件后,需要在网页中引入它

    <!DOCTYPE html>

     <html manifest=”online.manifest”>

     </html> 

    在使用离线应用的时候,应该检测浏览器是否支持离线应用

    If(window.applicationCache){

             Support it ;

    }

    扩展:判断网络是否在线,可用js进行检测

    bool  (Window.navigator.online)

    这些应用需要服务器支持。

    Apache服务器开启支持的方式是:在conf/mime.types中添加一段代码:

                test/cache-manifest manifest

    IIS服务器开启方式:

                右键--HTTP---MIME映射下,单击文件类型---新建---扩展名输入manifest,类型中输入test/cache-manifest

    Html5的离线应用有一套 javascrpt api 操作方法。可以检测离线应用的状态,提高用户体验。

  • 相关阅读:
    js、css等文件引入空白问题
    Vue 组件 data为什么是函数
    安装Node,创建vue项目,运行及打包
    JQuery移除事件
    百度地图定位
    移动端导航过多,点击导航左右滚动回弹
    移动端开发模板
    移动端左右滑动导航
    使用‘圣杯布局’、‘双飞翼布局’来解释自适应的三栏水平布局
    css实现三角箭头
  • 原文地址:https://www.cnblogs.com/hellome/p/3977240.html
Copyright © 2011-2022 走看看