首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

用 HTML 5 构建 Web 应用程序（2）探测的能力

论坛元老

Rank: 8Rank: 8

UID
1066743 
1#
打印
tT
look_w发表于 2018-9-19 18:30 | 只看该作者

用 HTML 5 构建 Web 应用程序（2）探测的能力

探测的能力有一个关于 Web 开发人员的笑谈，Web 开发人员用他们 20% 的时间写代码，然后用剩下的 80% 的时间让这些代码能够在所有浏览器中运转起来并获得相同的效果。要说 Web 开发人员已习惯于处理不同浏览器间的差别多少有点不切实际。随着浏览器新一轮创新浪潮的出现，这种低效的方法仍然没有改善。最新、最好的浏览器所支持的特性在不断变化。
不过，也有好的一面，这些新特性均集中在 Web 标准，这就让您能够现在就开始使用这些新特性。您可以采用渐进增强的老技巧、提供一些基线特性、查找高级特性，然后用出现的额外特性增强您的应用程序。要做到这一点，我们需要学习如何探测新功能。清单 1 显示了一个简单的探测脚本。
清单 1. 探测脚本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function detectBrowserCapabilities(){
    $("userAgent").innerHTML = navigator.userAgent;   
    var hasWebWorkers = !!window.Worker;
    $("workersFlag").innerHTML = "" + hasWebWorkers;
    var hasGeolocation = !!navigator.geolocation;
    $("geoFlag").innerHTML = "" + hasGeolocation;
    if (hasGeolocation){
        document.styleSheets[0].cssRules[1].style.display = "block";
        navigator.geolocation.getCurrentPosition(function(location) {
            $("geoLat").innerHTML = location.coords.latitude;
            $("geoLong").innerHTML = location.coords.longitude;
        });
    }
    var hasDb = !!window.openDatabase;
    $("dbFlag").innerHTML = "" + hasDb;
    var videoElement = document.createElement("video");
    var hasVideo = !!videoElement["canPlayType"];
    var ogg = false;
    var h264 = false;
    if (hasVideo) {
        ogg = videoElement.canPlayType('video/ogg; codecs="theora, vorbis"') || "no";
           h264 = videoElement.canPlayType('video/mp4;
codecs="avc1.42E01E, mp4a.40.2"') || "no";
    }
    $("videoFlag").innerHTML = "" + hasVideo;
    if (hasVideo){
        var vStyle = document.styleSheets[0].cssRules[0].style;
        vStyle.display = "block";
    }
    $("h264Flag").innerHTML = "" + h264;
    $("oggFlag").innerHTML = "" + ogg;
}




目前已经出现了大量新特性和标准，成为了 HTML 5 标准的一部分。本文重点将放在几个最有用的特性上。 中的脚本探测到了四个新特性：
  • Web worker（多线程）
  • 地理定位
  • 数据库存储
  • 本地视频回放
这个脚本的开头显示了用户浏览器的用户代理。它通常是一个惟一标识此浏览器的字符串，但它很容易被篡改。对于这个应用程序它已经足够好了。下一步是开始检测特性。首先要通过在全局范围（视窗）中查找 Worker 函数来检测 Web worker。这里用到了一些符合语言习惯的 JavaScript：双重否定。如果 Worker 函数不存在，那么 window.Worker 的求值结果为未定义，这是 JavaScript 中的一个 “伪” 值。如果在它前面放上一个单否定，就会被求值为真，因此放上一个双否定将被求值为假。检测完该值后，脚本会通过修改清单 2 中显示的 DOM 结构来将这个评估结果显示在屏幕上。
清单 2. 检测 DOM
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<input type="button" value="Begin detection"
    onclick="detectBrowserCapabilities()"/>
<div>Your browser's user-agent: <span id="userAgent">
   </span></div>
<div>Web Workers? <span id="workersFlag"></span></div>

<div>Database? <span id="dbFlag"></span></div>
<div>Video? <span id="videoFlag"></span></div>
<div class="videoTypes">Can play H.264? <span id="h264Flag">
   </span></div>
<div class="videoTypes">Can play OGG? <span id="oggFlag">
   </span></div>
<div>Geolocation? <span id="geoFlag"></span></div>
<div class="location">
    <div>Latitude: <span id="geoLat"></span></div>
    <div>Longitude: <span id="geoLong"></span></div>
</div>




清单 2 是一个简单的 HTML 结构，用来显示由检测脚本收集到的诊断信息。如 清单                    1 中所示，下面要检测的是地理定位。这里再次使用了双重否定，但这次您要检测一个名为 geolocation 的对象，它应该是 navigator 对象的一个属性。如果找到该对象，那么就用 geolocation 对象的 getCurrentPosition 函数来获取当前的位置。获取位置可能是一个很慢的过程，因为通常会涉及到扫描 Wi-Fi 网络。在移动设备上，可能还会涉及到扫描无线发射塔和 ping GPS 卫星。由于花费时间很长，因此 getCurrentPosition 是异步的，并会将 callback 函数作为一个参数。在本例中，我们为 callback 使用一个闭包，它显示位置字段（通过启用其 CSS），然后将经度和纬度写到此 DOM。
下一步是检测数据库存储。检测是否有全局函数 openDatabase，这个函数用于创建和访问客户端数据库。
最后，检测本地视频回放。用 DOM API 创建一个视频元素。今天的任何浏览器都能创建这样一个元素。在较老的浏览器中，这会是一个有效的 DOM 元素，但它没有任何的特别含义。这就如同是创建一个名为 foo 的元素。在一个较现代的浏览器中，它将是一个专用元素，就像是创建一个 div 或 canPlayType 元素。它将具有一个名为 canPlayType 的函数，所以只检测它的存在就可以了。
即使一个浏览器已经有了本地视频回放的功能，但它所支持的视频类型或它能回放的编解码并不是标准化了的。最容易想到的是要检测这个浏览器所支持的编解码。目前没有编解码的标准列表，但是有两个最常见的是 H.264 和 Ogg Vorbis。为了检测对特定的一个编解码的支持，可以向 canPlayType 函数传递一个识别字符串。如果浏览器能支持这个编解码，该函数将返回 probably（说真的 — 不是开玩笑的）。如果不支持，该函数将返回 null。在这个检测代码中，只针对这些值进行了检测并将结果显示在此 DOM 中。在一些常用浏览器中测试过此代码后，就会出现清单 3 中所示的综合结果。
清单 3. 不同浏览器的功能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#Firefox 3.6
Your browser's user-agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6;
en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6
Web Workers? true
Database? false
Video? true
Can play H.264? no
Can play OGG? probably
Geolocation? true
Latitude: 37.2502812
Longitude: -121.9059866

#Safari 4.0.4
Your browser's user-agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_2;
en-us) AppleWebKit/531.21.8 (KHTML, like Gecko) Version/4.0.4 Safari/531.21.10
Web Workers? true
Database? true
Video? true
Can play H.264? probably
Can play OGG? no
Geolocation? false

#Chrome 5.0.322
Your browser's user-agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_2;
en-US) AppleWebKit/533.1 (KHTML, like Gecko) Chrome/5.0.322.2 Safari/533.1
Web Workers? true
Database? true
Video? true
Can play H.264? no
Can play OGG? no
Geolocation? false




上面所列的所有常用桌面浏览器所支持的特性都不少。
  • Firefox 惟一不支持的特性是数据库。对于视频，它只支持 Ogg。
  • Safari 惟一不支持的特性是地理定位。
  • Chrome 惟一不支持的特性是地理定位，尽管它声称不支持 H.264 或 Ogg。这可能是一个 bug，问题或是出在用于此次测试的 Chrome 的构建，或是出在检测代码。Chrome 实际上是支持 H.264 的。
地理定位在桌面浏览器上并不受广泛支持，但它在移动浏览器上却是受广泛支持的。清单 4 显示了移动浏览器的综合测试结果。
清单 4. 移动浏览器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#iPhone 3.1.3 Simulator
Your browser's user-agent: Mozilla/5.0 (iPhone Simulator; U; CPU iPhone OS 3.1.3
like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko)
Version/4.0 Mobile/7E18 Safari/528.16
Web Workers? false
Database? true
Video? true
Can play H.264? maybe
Can play OGG? no
Geolocation? true
Latitude: 37.331689
Longitude: -122.030731

#Android 1.6 Emulator
Your browser's user-agent: Mozilla/5.0 (Linux; Android 1.6; en-us;
sdk Build/Donut) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2
Mobile Safari/525.20.1
Web Workers? false
Database? false
Video? false
Geolocation? false

#Android 2.1 Emulator
Your browser's user-agent: Mozilla/5.0 (Linux; U; Android 2.1; en-us;
sdk Build/ERD79) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0
Mobile Safari/530.17
Web Workers? true
Database? true
Video? true
Can play H.264? no
Can play OGG? no
Geolocation? true
Latitude:
Longitude:




上述代码中显示了最新的 iPhone 模拟器之一以及两种 Android。Android 1.6 不支持我们上述的这些检测。但实际上只要使用 Google Gear 它就能支持除视频之外的所有这些特性。它们就相当于是 API（就功能而言），但它们并不符合 Web 标准，因此会得到  中所显示的结果。将它与 Android 2.1 做个对照，后者支持所有这些特性。
请注意，iPhone 惟一不支持 Web worker。 显示出 Safari 的桌面版本支持 Web worker，因此有理由相信这个特性不久也将会出现在 iPhone 中。
知道了该如何检测用户浏览器的这些特性之后，现在，让我们来探究一个简单的应用程序，这个应用程序将会综合使用这些特性 — 这取决于用户浏览器能处理什么。我们要构建的这个应用程序的功能是使用 Foursquare API 搜索某用户所在地周边的热点场所。
收藏 分享 评分
回复 引用

订阅 TOP

返回列表