安装以及离线访问

使用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下载。

时间: 2024-11-05 20:28:20

安装以及离线访问的相关文章

安装wamp,访问主页提示PHP configuration loaded file&hellip;&hellip;

安装wamp,访问主页提示PHP configuration loaded file-- *** ERROR *** The PHP configuration loaded file is: - should be: C:/wamp/bin/apache/apache2.4.17/bin/php.ini or c:/wamp/bin/php/php5.6.15/phpforapache.ini 安装的版本为 wampserver3_x86_apache2.4.17_mysql5.7.9_php

mysql的安装、C++访问mysql数据库、编码设置问题

一.mysql的安装,这个相对简单,直接去官网下载mysql安装程序,就可以完成安装过程,网上有很多安装教程,这个没什么注意事项. 二.C++访问mysql,主要是用到mysql定义的头文件,内部定义了各种数据结构和函数,比如MYSQL,MYSQL_RES,MYSQL_ROW,mysql_real_connect等等一系列的结构和函数.这里要注意的就是将头文件及lib文件以及dll文件配置到当前开发环境来进行访问mysql数据库. 以最新的vs2013作为示例说一下配置过程.为了写的清晰点,在网

C# 免安装ORACLE客户端访问数据库

c#开发程序时,在没有安装oracle客户端时,访问数据库报 “System.Data.OracleClient 需要 Oracle 客户端软件 8.1.7 或更高版本.” 在没有安装oracle客户端的情况下,可连接oracle数据库执行各种操作 使用方法: 将oci.dll.ociw32.dll.Oracle.DataAccess.dll.orannzsbb11.dll.oraocci11.dll.oraociicus11.dll.OraOps11w.dll拷到程序bin目录下 C# 免安装

离线访问-manifest(有疑问未解决)

1.html文件,添加 manifest="cache.manifest" 引入style.css.script.js文件 <!DOCTYPE html> <html lang="en" manifest="cache.manifest"><!--html5的缓存清单--> <head> <meta charset="UTF-8"> <title>离线访问

svn安装(http访问)、备份、增量备份、恢复

svn安装之http访问方式 一.SVN安装与apache配置 创建以下脚本svn_http_install.sh,用来安装svn以及httpd配置 ##!/bin/bash #安装svn以及依赖包 yum -y install apr apr-util sqlite neon subversion #创建http支持svn配置文件 cat > /root/svn_http.conf <<Eof <location /repos/> DAV svn SVNListParent

MAC上安装并破解最新SublimeText3103版本,安装PrettyJSON离线格式化json字符串

开发中少不了将JSON字符串格式化,方便查看.之前都是在线转,最近知道ST安装个插件就可以离线格式化JSON就又倒腾起来了.还真遇到点麻烦,故此记录. 1,官网下载 Sublime Text Build 3103.dmg,双击安装: 2,输入注册码: -– BEGIN LICENSE -–Ryan ClarkSingle User LicenseEA7E-8124792158A7DE B690A7A3 8EC04710 006A5EEB34E77CA3 9C82C81F 0DB6371B 797

haproxy 安装与记录访问日志

1.下载haproxy: haproxy的官网地址为http://www.haproxy.org/,写这篇文章的时候需要翻墙才可以访问, 当前的最新版本为1.6.3,是在2015年12月27号发布的,下载地址为http://www.haproxy.org/download/1.6/src/haproxy-1.6.3.tar.gz 2.编译安装: tar xvf haproxy-1.6.3.tar.gz cd haproxy-1.6.3 make TARGET=linux26 PREFIX=/us

windows xp 如何安装 github离线安装包

介绍: Git是一个分布式的版本控制系统,最初由Linus Torvalds编写,用作Linux内核代码的管理. 在推出后,Git在其它项目中也取得了很大成功,尤其是在Ruby社区中. 目前,包括Rubinius和Merb在内的很多知名项目都使用了Git. Git同样可以被诸如Capistrano和Vlad the Deployer这样的部署工具所使用. 官方网站 windows.github.com 国内网站 http://www.xpgod.com/soft/14378.html 下载 gi

python selenium的在线安装及离线安装

selenium 为UI自动化测试工具,主要用来进行UI自动化测试,缩减测试员工的测试时间,其主要安装方式有两种,第一种为在线安装:第二种为离线安装(内网缺网环境的安装,并进行比对) 第一种,在线安装 从我的网盘中下载python 2.7.9的版本,下一步到底即可,可以在c盘中生成一个C:\Python27的文件夹. 此时python版本已经安装好,我们需要在线安装selenium的版本,我们进入到C:\Python27目录下,可以看到Scripts的文件夹,点开后进去我们可以看到pip.exe