首页 > 代码库 > 安装以及离线访问

安装以及离线访问

2024-08-07 06:19:19   218人阅读

        使用HTML5技术和其他扩展，可以让jQuery Mobile应用和移动设备上的原声应用一样完全离线运行。通过同样的url或者应用图标访问这个应用时，应用奖不在从服务器端加载，而是直接从本地启动。

        软件包的定义

        Html5的一个API，叫做应用程序缓存（Application  Cache），在W3C的草案中也被称为离线API（offline API）。测试兼容性：http://mobilehtml5.org
        软件包其实是一组文件，是用户访问应用站点时必须有浏览器下载到本地的文件。这组文件必须包含我们想要的离线访问的每一个资源，比如Javascript、css以及图片。
        利用软件包可以构建：
            完全离线的应用；
            只更新页面或者某些数据；
            保存一份离线的数据缓存，在有网络连接的情况下回进行更新。        
     软件包内的文件是根据一个被称为缓存清单（cache  manifest）的文本文件发布的。清单文件的第一行必须是CACHE MANIFEST，随后是所有需要被下载到设备的资源URL列表，URL可以是相对路径或绝对路径。使用#做注释
    看起来应该是这样的，例如：
    CACHE MANIFEST:
    #jQuery 核心文件
    http://code.jquery.com/jquery-1.6.1.min.js
    #没有自定义主题的jQuery Mobile文件
    ......链接
    注意：清单上的任一文件下载失败都会导致软件无效。
    清单的文件的名字通常叫做offline.appchache，并且只有以text/cache-manifest的mime类型提供给客户端才能生效。
    在html文件中定义清单文件的url，可通过设置html元素的maifest属性来完成。manifest 是html5新引入的一个属性。
    <html manifest=“offline.appcache”><!--应用的正文--></html>
    下载应用
    后台的下载进程和正常的页面加载是完全分开的。下载进程会把清单里面的每一个文件都下载下来，保存在设备上一个只有它自己可以访问的地方。
    软件包安装成功，那么下一次用户访问相同URL时，浏览器就会加载应用的本地版本，而不再去访问服务器端。
    注意：只要有一个资源没有下载成功，那么整个软件包都将无效。
    下载失败的原因：
  • 清单文件无效，不存在，或者MIME类型错误；
  • 至少有一个清单中列举的资源无法被访问到；
  • 在所有的资源被正确地下载到本地之前，用户推出了浏览器或者网页。
    访问在线资源
    默认情况下，所有的资源都定义在无需显示声明的CACHE段落内。
    每次都需要从网上下载现象，可以在清单文件中定义一个专门的NETWORK：段落。
    例如每次都加载一个.json文件：
    #需要每次都从网络上获取的资源
    NETWORK:
    data/countries.json
    可以操作文档对象的事件：online和offline。window.onLine这个布尔类型的属性，可以知道当前是否有互联网链接。
    清单中的NETWORK 段落支持使用通配符*或者文件夹的资源描述方式。如果使用文件夹，那么离线模式下，指定文件夹下的所有资源都会从网上获取。
    例如：
    NETWORK：
    *
    应用这个配置的话，就只有在NETWORK：段落前声明的文件才会从离线软件包中加载，其他的所有资源都会从网络上获取。
    更新资源
    第二次加载时浏览器会在后台进程中尝试从服务器端获取最新的清单文件。只要一个字节改变了，之前的清单就失效了，会根据新的清单文件把每个资源重新下载一遍。
   注意，如果只更改内容而不更改清单上的版本号，内容不会更新。不论增加空格、修改资源的名字，甚至可以是增加一行注释、包含一个随机数或者最后修改时间，都算更新。
    不完美的地方：清单更新会重新下载清单中的所有资源，下载完成后不会立即显示，而需要重新启动应用才改变。当然这个问题可以应用事件机制来解决。
    JavaScript对象
    applicationCache可以帮助我们了解应用缓存的状态。
    
    例如：
        if(window.applicationCache!=undefined){
        //浏览器支持applicationCache的使用
            if（applicationCache.status==applicationCache.UPDATEREADY）{
                //有更新等待重加载后生效
            } }
    applicationCache对象包含update()方法（强制发起更新检查）和swapCache()方法（从旧的资源缓存切换到新的资源，前提是新资源已经下载完毕）。已经加载的HTML文档和资源只有调用history.reload()进行一次完全重载后才能真正生效。
    applicationCache对象支持多种事件，可以管理这些场景，此处不再陈述。
    常见的事件：
    downloading：向用户显示下载消息，额外地还可以提供一个旋转着的下载动画；
    progress：制作一个进度条；
    cached：隐藏下载消息并告知用户应用已经安装完毕；
    error：隐藏下载消息并告知用户错误原因；
    updateready：通知用户应用更新已经准备完毕，并征询用户是否要马上重新加载以访问新版的应用。
    可以使用addEventListener方法来进行事件绑定。

安装应用图标

    引导：通常应用会将是否已经对用户进行过引导的记录保存在cookie或者HTML5 localStorage中，确保用户只会被引导一次。
    用户在首页之外的页面（无论是应用内部还是外部的页面）上添加应用快捷方式到主屏幕或者应用菜单上，那么应用快捷方式会指向当前页面而不是首页，当前页的data-title属性会被作为应用名。
    全屏
    <meta name="apple-mobile-web-app-capable" content="yes">

存储离线数据

     信息存储提供了三种选择：
        WebStorage API；
        Web SQL Database API；
        IndexedDB API；
    localstorage是一个在设备上持久存储的字符串集合，sessionStorage也差不多，知识每次浏览器关闭后它会被清除。
    localStorage Api只能存储字符串，这意味着可以存储：
    转换成JSON格式字符串的数组和对象；
    简单格式的值；
    逗号分隔的值；
    Javascript代码（供随后解析执行）；
    CSS样式表（供随后注入）；
    HTML；
    转化为base64字符串的图片（data URI）；

    主流的移动浏览器支持JavaScript对象和JSON字符串相互转化的JSON API，使用JSON.stringfy(object)将对象转化为JSON字符串，使用JSON.parse(string)将字符串转化成JavaScript对象。若浏览器不支持可以到http://github.com/douglascrockford/JSON-js下载。

安装以及离线访问


联系
我们