【HTML5移动开发学习笔记】CH6-离线WebAPI+ARIA+地理API

版权声明:商业转载需要经过本人同意,敬上! https://blog.csdn.net/weixin_41835977/article/details/89482453

离线Web应用

localStorage,sessionStorageAPI,离线应用缓存API,连接事件,状态,indexDB。

1,是否连接上网
采用navigator对象的onLine属性。

var isOnline = navigator.onLine;

返回true或false,true代表用户是在企业内网的而不一定意味着用户必然能访问互联网。
2,应用缓存
AppCache-指定哪些文件应该被缓存起来,离线时可用
为了让AppCache正常运行,在html标志包含manifest属性,该属性是一个文本文件的url,在该文本中列出了哪些资源应该被缓存。

缓存清单文件-appcache,列出了浏览器应该进行缓存的用以支持离线应用访问的资源。
使用text/cache-manifest的MIME类型进行托管。
往**.htaccess文件或服务器配置**中添加:

AddType text/cache-manifest .appcache

一个缓存清单文件看起来可能是这样的:

CACHE MANIFEST --必须以此字符串开始
#version01

#files that explicity cached-显式缓存
CACHE:
index.html
css/style.css
scripts/application.js

#Resources requiring connectivity-显式不缓存,在线才可访问
NETWORK:
signin.php
dosoming.cgi

FALLBACK:
/  404.html

#SETTING节头
SETTING:

更新缓存只有通过修改清单文件或者JS applicationCache方法才会被更新或覆盖。

var appcahce = window.applicationCache;

if(appCache.status == appCache.UPDATEREADY) {//存在的值有UNCACHED,IDLE,CHECKING,DOWNLOADING,UPDATEREADY,OBSOLETE
	appcache.swapCache();
}

本地和会存储
cookie:主要用于会话管理,个性化和追踪,大小上限:4KB,可以存储300-400个cookie,而针对每台服务器和域只能存最多20个。cookie会随着每次的http请求发送到服务器。
localStorage被用于单个浏览器,长时间储存大量数据,可以跨所有浏览器窗口访问。
sessionStorage数据限制于生成它的浏览器窗口,会话关闭数据消失。
localStorage和sessionStorage都具有5个同样的方法和唯一属性:

setItem(key, value)
getItem(key)
removItem(key)
clear()
key(position)
length

可以使用localStorage在第一次新页面请求时,随着请求一起发送的cookie就会通知服务器哪些文件被存储在用户浏览器里,然后该服务器就只发送需要的文件。
把所有资源利用localStorage存储在本地。

Web SQL database

它是过时的,但是在Android和IOS支持indexedDB之前的权宜之计。

托管并持久储存在用户内部的数据库。
允许结构化数据存储,使用行和列的表格,而不仅仅是key/value对。
它的方法有:

window.openDatabase(database_name, database_version, display_name, db_size)-返回数据库的一个引用
//eg
if(window.openDatabase){
		qbdoo.db = openDatabase("highScoreDB","1.0","Scores",dbSize);
	}

transaction方法,database的一个方法

db.transaction(transaction_callback, error_callback, success_callback);
//e.g:
db.transaction(function(trnactn){
	trnactn.excecuteSql("SELECT * FROM scores", [ ], callbackFunc,
	db.onError);
});

excecuteSql-数据库的方法,接受SQL语句

地理位置服务

if (navigator.geolocation) {
		//
	}

地理位置对象提供的方法:

navigator.geolocation.getCurrentPosition(handler_success, handler_error)//只返回一次,成功的话返回coords对象,具有以下属性
function handler_success(position){
		position.coords.latitude
		position.coords.longitude
		position.coords.altitude
		position.coords.accurency
	}
watchCurrentPosition()//持续返回
返回coords对象,具有以下属性:
position.coords.heading
position.coords.speed

WebWorker

允许JS把繁重的任务委托给其他进程,让脚本并行运行。

if(window.Worker){
		//browser support web worker
		var webworker = new Worker("subcontractor.js");//create it
		webworker.postMessage(some_message);
	}

与WebWorker的通信是由postMessage()方法实现,一旦创建了就给worker的onmessage属性设置一个适当的事件处理器函数。
使用terminate()或close()方法来结束一个worker。
例如:使用WebWorker对分数排序。

if(window.Worker){
		//browser support web worker
		var webworker = new Worker("subcontractor.js");//create it
		webworker.postMessage(qdboo.highscores);
		webworker.onmessage = function (event) {
		// body...
			qdboo.highscores(event.data);
		}
	}
	
//webworker js
self.onmessage = function (event) {
	// body...
	var sortedScores = sortScores(event.data);
	self.postMessage(sortedScores);

}

微数据microdata

不会以可见的方式影响网站,但对搜索引擎优化和数据抓取,是个重要特性。

跨文档消息

跨文档消息API,启用对来自其他域的传入消息以及发送到其他域的传出消息的事件处理器进行注册。
例如:

跨文档资源共享(CROS)

无障碍富Internet应用(ARIA)-Accessible Rich Internet Application

之后 再详细看。

猜你喜欢

转载自blog.csdn.net/weixin_41835977/article/details/89482453