window.navigator詳解和使用場景

navigator簡述

window.navigator返回一個navigator對象的引用,能夠用它來查詢一些關於運行當前腳本的應用程序的相關信息.
navigator的屬性和方法包括實現了NavigatorID接口的方法和屬性，NavigatorID接口包含瀏覽器識別相關的方法和屬性，可是不直接給開發者使用，navigator經過實現NavigatorID接口並添加了一些自有方法、屬性，可能根據各個瀏覽器表現不一，下面給出了chrome的navigator的包含的屬性和方法：

appCodeName : "Mozilla"
appName : "Netscape"
appVersion : "5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.91 Safari/537.36"
bluetooth : Bluetooth {}
budget : BudgetService {}
connection : NetworkInformation {downlink : 0, effectiveType : "4g", onchange : null, rtt : 75}
cookieEnabled : true
doNotTrack : null
geolocation : Geolocation {}
getBattery : ƒ getBattery()
getGamepads : ƒ getGamepads()
getUserMedia : ƒ getUserMedia()
hardwareConcurrency : 8
javaEnabled : ƒ javaEnabled()
language : "zh-CN"
languages : (2) ["zh-CN", "zh"]
maxTouchPoints : 0
mediaDevices : MediaDevices {ondevicechange : null}
mimeTypes : MimeTypeArray {0 : MimeType, 1 : MimeType, 2 : MimeType, 3 : MimeType, 4 : MimeType, length : 5}
onLine : true
permissions : Permissions {}
platform : "MacIntel"
plugins : PluginArray {0 : Plugin, 1 : Plugin, 2 : Plugin, 3 : Plugin, length : 4}
presentation : Presentation {defaultRequest : null, receiver : null}
product : "Gecko"
productSub : "20030107"
registerProtocolHandler  : ƒ registerProtocolHandler()
requestMIDIAccess : ƒ requestMIDIAccess()
sendBeacon : ƒ sendBeacon()
serviceWorker : ServiceWorkerContainer {controller : null, ready : Promise, oncontrollerchange : null, onmessage : null}
unregisterProtocolHandler : ƒ unregisterProtocolHandler()
userAgent : "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.91 Safari/537.36"
vendor : "Google Inc."
vendorSub : ""
vibrate : ƒ vibrate()
webkitGetUserMedia : ƒ webkitGetUserMedia()
webkitPersistentStorage : DeprecatedStorageQuota {}
webkitTemporaryStorage : DeprecatedStorageQuota {}

上面有不少屬性和方法不是標準，因此並不適合開發人員使用，因此把navigator實現的NavigatorID接口的屬性和方法來解析下便可；其中包括以下：

1. NavigatorID.appCodeName 只讀
   任何瀏覽器中，老是返回 'Gecko'。該屬性僅僅是爲了保持兼容性。
2. NavigatorID.appName 只讀
   返回瀏覽器的官方名稱。不要期望該屬性返回正確的值。
3. NavigatorID.appVersion 只讀
   返回一個字符串，表示瀏覽器的版本。不要期望該屬性返回正確的值。
4. NavigatorID.platform 只讀
   返回一個字符串，表示瀏覽器的所在系統平臺。
5. NavigatorID.product 只讀
   返回當前瀏覽器的產品名稱（如，"Gecko"）。
6. NavigatorID.userAgent 只讀
   返回當前瀏覽器的用戶代理字符串（user agent string）

還有部分其實大部分瀏覽器嘗試也都比較支持的像：browserLanguage、cookieEnabled、systemLanguage、userLanguage等，可是都應該儘可能不使用。

appCodeName屬性

功能：返回瀏覽器的代碼名。該屬性是一個只讀的字符串。
語法：navigator.appCodeName
在全部以Netscape代碼爲基礎的瀏覽器中，它的值是"Mozilla"。爲了兼容起見，在Microsoft的瀏覽器中，它的值也是"Mozilla"，同時在safari在瀏覽器的console裏運行navigator.appCodeName得出的結果仍是"Mozilla"。
因此這個看起來並不實用，由於IE、chrome、safari返回的都是「Mozilla」；

NavigatorID.appName屬性

返回所使用瀏覽器的名稱。因爲兼容性問題，HTML5 規範容許該屬性返回 "Netscape" 。
在chrome、safari的裏面都是返回"Netscape"
該屬性並不必定能返回正確的瀏覽器名稱。在基於 Gecko 的瀏覽器 （例如 Firefox）和基於 WebKit 的瀏覽器（例如 Chrome 和 Safari）中，返回的瀏覽器名稱都是 "Netscape".

appVersion屬性 【已廢棄】

返回一個字符串，表示所使用瀏覽器的版本號。它可能只包含一個版本數字，如 "5.0"，還可能包含一些其餘的相關信息。因爲兼容性問題，HTML5規範容許該屬性返回 "4.0"。
該特性已經從 Web 標準中刪除，雖然一些瀏覽器目前仍然支持它，但也許會在將來的某個時間中止支持，請儘可能不要使用該特性。

platform屬性

返回一個字符串,表示瀏覽器所在的系統平臺類型.
platform 多是: "Win32", "Linux i686", "MacPPC", "MacIntel", 等，
在必定程度上能夠用來區分移動端和pc端，但不是很好的方案。

product屬性

該屬性返回當前瀏覽器的產品名稱，提及來其實也不靠譜，畢竟也就那麼幾種，還能夠假裝。
注意：該屬性不必定返回一個真實的產品名稱。Gecko 和 WebKit 瀏覽器返回 "Gecko" 做爲該屬性的值。

userAgent屬性 【重點】

返回當前瀏覽器的用戶代理（user agent）字符串；先看看chrome、safari、ios、android的返回值：

chrome:
    Mozilla/5.0 
    (Macintosh; Intel Mac OS X 10_12_6) 
    AppleWebKit/537.36 (KHTML, like Gecko) 
    Chrome/61.0.3163.91 Safari/537.36
safari:
    Mozilla/5.0 
    (Macintosh; Intel Mac OS X 10_12_6) 
    AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 
    Safari/604.1.38
ios11劉海X:
    Mozilla/5.0 
    (iPhone; CPU iPhone OS 11_0 like Mac OS X) 
    AppleWebKit/604.1.38 (KHTML, like Gecko) 
    Version/11.0 Mobile/15A372 Safari/604.1
ipad：
    Mozilla/5.0 
    (iPad; CPU OS 9_1 like Mac OS X) 
    AppleWebKit/601.1.46 (KHTML, like Gecko)
    Version/9.0 Mobile/13B143 Safari/601.1
galxy sansum:
    Mozilla/5.0 
    (Linux; Android 5.0; SM-G900P Build/LRX21T) 
    AppleWebKit/537.36 (KHTML, like Gecko) 
    Chrome/61.0.3163.91 Mobile Safari/537.36
安裝uc瀏覽器：
    Mozilla/5.0 
    (Linux; U; Android 6.0.1; zh-CN; Mi Note 2 Build/MXB48T)
    AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 
    Chrome/40.0.2214.89 UCBrowser/11.4.9.941 Mobile Safari/537.36
winphone:
    Mozilla/5.0 
    (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E) 
    AppleWebKit/537.36 (KHTML, like Gecko) 
    Chrome/61.0.3163.91 Mobile Safari/537.36
hybrid方法的可能：
    Mozilla/5.0 
    (iPhone; CPU iPhone OS 11_0 like Mac OS X) 
    AppleWebKit/604.1.38 (KHTML, like Gecko) 
    Mobile/15A372 weibo/80011134

以上數據大部分是在chrome開發者工具模擬的或者ios模擬器模擬的結果，但願更多的話能夠參考：
http://www.cnblogs.com/yannis... 或者 http://blog.csdn.net/rj042/ar... 這個連接中給的列表，
至於格式的話因爲歷史緣由，也是千奇百怪，主要是各家瀏覽器廠商都想要本身的瀏覽器被其餘的兼容，因此都會或多或少的加上一些其餘的信息在裏面；
主要的格式列舉以下：

1. Gecko Gecko 是 Firefox 的呈現引擎

   Mozilla/MozillaVersion 
   (Platform; Encryption; OS-or-CPU;Language;PrereleaseVersion)
   Gecko/GeckoVersion 
   ApplicationProduct/ApplicationProductVersion
   --- win下的展現---
   Mozilla/5.0 
   (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) 
   Gecko/20071127 
   Firefox/2.0.0.11

2. WebKit web 瀏覽器：Safari。它的呈現引擎叫 WebKit

   Mozilla/5.0 
   (Platform; Encryption; OS-or-CPU; Language)             
   AppleWebKit/AppleWebKitVersion (KHTML, like Gecko) 
   Safari/SafariVersion
   ---mac的展現---
   Mozilla/5.0 
   (Macintosh; Intel Mac OS X 10_12_6) 
   AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 
   Safari/604.1.38

3. Chrome Google Chrome 瀏覽器以 WebKit 做爲呈現引擎；字串格式是在 webKit 信息的基礎上又增長了以下

   Mozilla/5.0 
   (Platform; Encryption; OS-or-CPU; Language)
   AppleWebKit/AppleWebKitVersion (KHTML, like Gecko) 
   Chrome/ChromeVersion Safari/SafariVersionChrome
   ---mac下展現---
   Mozilla/5.0 
   (Macintosh; Intel Mac OS X 10_12_6) 
   AppleWebKit/537.36 (KHTML, like Gecko) 
   Chrome/61.0.3163.91 Safari/537.36

還有不少比較不同的格式：Opera、Konqueror等，而user-agent的做用有如下兩點比較重要：

一、統計用戶瀏覽器使用狀況。有些瀏覽器說被多少人使用了，實際上就能夠經過判斷每一個IP的UA來肯定這個IP是用什麼瀏覽器訪問的，以獲得使用量的數據。

二、根據用戶使用瀏覽器的不一樣，顯示不一樣的排版從而爲用戶提供更好的體驗。有些網站會根據這個來調整打開網站的類型,如是手機的就打開wap，顯示非手機的就打開pc常規頁面。用手機訪問谷歌和電腦訪問是不同的，這些是谷歌根據訪問者的UA來判斷的。

瀏覽器統計

這須要提取每一個瀏覽器的userAgent的特徵字符串，繼而使用相應的匹配來肯定具體的瀏覽器類別；主要是相似百度統計和站在統計之類的第三方以及大公司會關注這個指標，來肯定適配的針對性，甚至可能ie沒有訪問量就不須要支持了。

自適應方案

首先能夠考慮區別pc仍是移動端：

isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

以上基本能夠考慮到大部分移動端，可是如今hybrid如此盛行，因此不少時候還須要區分Android、iPhone、ipad之類的，由於在app裏面，ios的表現和移動端瀏覽器編寫會不同，特別是頭部的置頂；區分方式以上其實就夠實用的了。