HTML5+CSS3的读书笔记(five)--HTML5离线应用及地理位置应用

林子酱
314 阅读3分钟

第八章：HTML5离线应用及地理位置应用

1.离线应用的工作原理

1.浏览器缓存只针对单个网页，本地缓存针对的是整个Web应用
2.浏览器缓存所有浏览过的页面，本地缓存可缓存指定页面
3.浏览器缓存信息不可人为的控制，本地缓存可人为控制

2.管理本地缓存

离线存储是通过manifest文件夹来管理的，需要服务器端的支持
manifest文件是一个扩展名为'.manifest'的简单文本文件
该文件用于配置哪些资源文件需要被缓存，哪些不需要缓存
同时资源文件的访问路径也需要在manifest中进行配置
配置好manifest文件后，在页面中通过HTML元素的manifest属性指定
当前的manifest文件
页面加载时将自动缓存manifest中配置的资源文件

一个标准的manifest文件主要包含以下几个节点
1.CACHE:表示在离线状态下，浏览器需要缓存到本地资源文件列表

2.NETWORK：表示在在线状态下，需要访问的资源文件列表
配置在NETWORK列表中的资源文件，只有在客户端与服务器建立通信时才能被访问

FALLBACK:配置信息成对出现，前面的资源文件不可访问时，将使用后面的文件进行访问

CACHE MANIFEST
#version 0.0.0

CACHE:
JS/test.js
Css/test.css

NETWORK:
index.apsx

FALLBACK:
/Project/index.apsx  /Bak/Project/index.apsx

3.applicationCache检测及更新缓存

3.1 status
status属性用于返回是否有可更新的本地缓存信息

返回值0说明表示本地缓存不存在或处于不可用状态
返回值1说明表示本地缓存内容已经为最新状态，无需更新
返回值2说明表示正在检查manifest文件状态,判断该文件配置是否发生变化
返回值3说明表示已经确定manifest文件状态，正在下载
返回值4说明表示本地缓存内容已经更新
返回值5说明表示本地缓存已经被删除

3.2updataeReady事件
用于检测本地缓存是否更新完毕
当manifest文件被更新且浏览器载入新的资源文件时会被触发

3.3 swapCache方法

用于手动更新本地缓存信息，只能在applicationCache的updataReady事件触发时调用

3.4 update事件
手动更新本地缓存

4.检测在线状态

4.1 onLine

navigator.onLine

4.2 offLine

5.Geolocation的工作原理

5.1 GPS信息
5.2 IP定位
5.3 无线网络定位

6.获取当前地理位置

getCurrentPosition(onSuccess,onError,[,options])

6.1 onsuccess回调函数

navigator.geolocation.getCurrentPosition(function(position){
	var coords=position.coords;//获取coords对象
    var latitude=coords.latitude;//获取维度
    var longtitude=coords.longtitude;//获取经度
})

6.2 onerror回调函数
function(error){
    switch(error.code) {
        case error.TIMEOUT:
            alert("超时!");
            break;
        case error.POSITION_UNAVAILABLE:
            alert('无法检测当前位置信息!');
            break;
        case error.PERMISSION_DENIED:
            alert('当前浏览器设置不允许共享位置信息!');
            break;
        case error.UNKNOWN_ERROR:
            alert('未知错误!');
            break;
    }
}

6.3 options参数
enableHighAccuracy 用于指定是否要求高精度的地理位置信息
timeout:用于指定获取地理位置的超时时间
maximumAge:用于指定地理位置信息缓存的有效时间

7.监视地理位置信息

watchCurrentPosition方法可以定期、持续获得当前用户的地理位置信息

watchCurrentPosition(onSuccess,onError,[,options])

8.停止获取当前地理位置信息

clearWatch方法可以设置停止获取当前用户的地理位置信息

clearWatch(watchID)

watchID为watchCurrentPosition方法的返回值

9.案例

<!DOCTYPE html >
<html>
<head runat="server">
<script type="text/JavaScript" src="http://api.go2map.com/maps/js/api_v2.0.js">
</script>
<script type="text/JavaScript">
var map,mapsEventListener;
function initialize1() {
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(
			function(position){
				var coords = position.coords; 
				var latitude = coords.latitude; //获取纬度
				var longitude = coords.longitude; //获取经度
				//开始调用搜狗地图API
				var myLatlng = new sogou.maps.LatLng(latitude,longitude);
				var myOptions = {
					zoom: 16,
					center: myLatlng,
					mapTypeId: sogou.maps.MapTypeId.ROADMAP
				}
				map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);
				var marker = new sogou.maps.Marker({
					position: myLatlng,
					map: map,
					title:"您当前的位置"
				});
				var infowindow = new sogou.maps.InfoWindow({ content: "经度："+longitude+"纬度："+latitude});
				mapsEventListener=sogou.maps.event.addListener(marker, 'click', function() {
					infowindow.open(map,marker);
				}); 			
			}, 
			function(error){
				switch(error.code) {
					case error.TIMEOUT:
						alert("超时!");
						break;
					case error.POSITION_UNAVAILABLE:
						alert('无法检测当前位置信息!');
						break;
					case error.PERMISSION_DENIED:
						alert('当前浏览器设置不允许共享位置信息!');
						break;
					case error.UNKNOWN_ERROR:
						alert('未知错误!');
						break;
				}
			}
		);
	}
}
</script>
</head>
<body onload="initialize1()">
<div id="map_canvas" style="width: 500px; height: 500px"></div>
</body>
</html>
avatar
文章
阅读
粉丝