离线web缓存

最新推荐文章于 2024-06-26 02:58:35 发布

xiaoerjun

最新推荐文章于 2024-06-26 02:58:35 发布

阅读量399

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/xiaoerjun/article/details/53350093

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

离线web应用程序

html5中，提供了一个本地缓存的API。

本地缓存与浏览器网页缓存的区别：
1. 本地缓存是为整个web应用程序服务的，而浏览器的网页缓存只服务于单个网页。
2. 任何网页都具有网页缓存，而本地缓存只缓存你指定的网页。
3. 网页缓存不可靠，而本地缓存是可靠地，可以控制对哪些内容进行缓存。

本地缓存是通过每个页面的manifest文件来管理的。该文件列举了需要被缓存或不需要被缓存的资源文件的名称以及访问路径。

在真正运行或测试离线web应用程序的时候，需要对服务器进行配置，让服务器支持text/cache-manifest这个MIME类型。例如对Apache服务器进行配置的时候，需要在{apache-home}/conf/mime.types这个文件最后添加代码：text/cache-manifest manifest

在web应用程序页面上的hmtl标签的manifest属性中指定manifest文件的url地址：

applicationCache对象

applicationCache对象代表了本地缓存，可以用它来通知用户本地缓存中已经被更新，也允许用户手工更新本地缓存。

但浏览器对本地缓存进行更新，装入新的资源文件时，会触发applicationCache对象的updateready事件。
applicationCache.onUpdateReady = function(){alert(“本地缓存已经被更新，您可以刷新页面来得到本程序的最新版本”)};

application.swapCache方法来控制如何进行本地缓存的更新及更新的时机。
实例：

<!DOCTYPE HTML>
<html manifest="swapCache.manifest">
<head>
<meta charset="UTF-8">
<title> swapCache方法示例</title>
<script>
function init() {
     setInterval(function() {
        // 手工检查是否有更新
        applicationCache.update();
    }, 5000);
    applicationCache.addEventListener("updateready", function() {
        if (confirm("本地缓存已被更新,需要刷新画面来获取应用程序最新版
本，是否刷新？")) {
        // (3) 手工更新本地缓存
            applicationCache.swapCache();
            // 重载画面
            location.reload();
        }
    }, true);
}

</script>
</head>
<body onload="init()">
<p>swapCache方法示例</p>
</body>
</html>

跨文档消息传输

接受消息：window.addEventListener(“message”,function(){},false);
发送消息：otherWindow.postMessage(message,targetOrigin);
第一个参数为要发送的消息，第二个为接收消息的对象窗口的url地址。

web Workers

html5新增的用来实现后台处理的技术。
创建后台线程：
var worker = new Worker(“worker.js”);传入要在后台线程中执行的脚本文件的url地址。
可以通过发送和接收消息来与后台线程互相传递数据，
worker.onmessage = function(event)
{
//处理收到的消息
}
发送消息：worker.postMessage(message);
示例：

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
// 创建执行运算的线程
var worker = new Worker("SumCalculate.js");
//接收从线程中传出的计算结果
worker.onmessage = function(event) 
{
    //消息文本放置在data属性中,可以是任何JavaScript对象.
    alert("合计值为" + event.data + "。");
};
function calculate() 
{
    var num = parseInt(document.getElementById("num").value, 10);
    //将数值传给线程
    worker.postMessage(num);
}
</script>
</head>
<body>
<h1>从1到给定数值的求和示例</h1>
输入数值:<input type="text" id="num">
<button onclick="calculate()">计算</button>
</body>

SumCalculate.js如下：

onmessage = function(event) 
{
    var num = event.data;
    var result = 0;
    for (var i = 0; i <= num; i++) 
result += i;
    //向线程创建源送回消息
    postMessage(result);
}

Geolocation API

html5中，为windownavigator对象新增了一个geolocation属性。，该属性有以下三个方法：
1. 取得当前地理位置：void getCurrentPosition(onSuccess,onError,options),
参数依次为：获取成功时的回调函数，失败时的回调函数，可选属性的列表。
navigator.geolocation.getCurrentPosition(function(position){
var coords = position.coords;
showMap(coords.latitude,coords.longitude,coords.accuracy);
});
onError回调函数使用error对象作为参数，该对象有两个属性：
code属性:
用户拒绝了位置服务（1）
获取不到位置信息（2）
获取信息超时错误（3）
message属性。
2. 持续监视当前地理位置的信息；
int watchCurrentPosition(onSuccess,onError,options);
3.停止获取当前用户的地理位置信息：
void clearWatch(watchid);改参数为watchCurrentPosition的返回值。

position对象的属性：

latitude(纬度）
longitude(经度）
altitude(海拔高度）
accuracy(经纬度的精度）
altitudeAccuracy
heading(设备的前进方向，用面朝正北方向的顺时针旋转角度来表示）
speed（前进速度，以米/秒单位）
timestamp(获取地理位置时的时间）

<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>获取当前位置的地理信息示例</title>
<script type="text/javascript" src=http://maps.google.com/maps/api/js?sensor=false />
<script type="text/javascript">
function showObject(obj,k){
    //递归显示object
    if(!obj){return;}
    for(var i in obj){
        if(typeof(obj[i])!="object" || obj[i]==null){
            for(var j=0;j<k;j++){
                document.write("&nbsp;&nbsp;&nbsp;&nbsp;");
            }
            document.write(i + " : " + obj[i] + "<br/>");
        }
        else
        {
            document.write(i + " : " + "<br/>");
            showObject(obj[i],k+1);
        }
    }
}
function get_location(){
    if(navigator.geolocation)    
        navigator.geolocation.getCurrentPosition(show_map,handle_error,{enableHighAccuracy:true,maximumAge:1000});
    else
        alert("你的浏览器不支持使用HTML5来获取地理位置信息。");
}
function handle_error(err){
    //错误处理
     switch(err.code){
         case 1 :
             alert("位置服务被拒绝。");
             break;
         case 2:
             alert("暂时获取不到位置信息。");
             break;
         case 3:
             alert("获取信息超时。");
             break;
         default:
             alert("未知错误。");
             break;
    }
}
function show_map(position){
    //显示地理信息
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    showObject(position,0);
}
get_location();
</script>
</head>
<body>
<div id="map" style="width:400px; height:400px"></div>
</body>