如何將地理位置集成到您的 PWA 中

假設用戶使用受支持的瀏覽器，您可以讓 PWA 使用 Geolocation API 輕鬆檢測用戶的位置，或者更具體地說，使用其中的navigator.geolocation對象。 以下是在 PWA 中正確執行此操作的方法：

先決條件

• 紮實的​​ JavaScript 和 HTML 知識。
• 通過HTTPS提供的工作PWA （按照我們的 PWA 教程創建一個）。

地理位置在行動

到目前為止，您可能對地理定位並不陌生。 在您的許可下，集成了地理位置的網站可以訪問您的位置，使用它可以顯示您所在地區的相關信息，或者只是在地圖上顯示您的位置。

如何將地理位置集成到您的 PWA 中

基礎知識

首先，我們需要了解navigator.geolocation對象背後的底層機制。 navigator對像是一個容器對象，通過它我們可以使用很多 Web API。 navigator容器內部是geolocation對象，由這三種方法提供：

• getCurrentPosition()
• watchPosition()
• clearWatch()

使用getCurrentPosition()獲取用戶的位置

第一個方法getCurrentPosition()的目的應該是不言自明的——它獲取用戶設備的位置。

 navigator.geolocation.getCurrentPosition(() => {})

獲取的位置在coords和timestamp中可用，其中coords是一個Coordinates對象。 默認情況下， Coordinates對象由以下屬性定義：

• accuracy以米為單位的位置精度
• altitude位置的高度
• accuracy位置高度的精度，以米為單位
• 指向設備heading的方向，以度數表示。 （0 = 北，東 = 90，南 = 180，西 = 270）
• latitude位置的緯度
• longitude位置的經度
• speed設備運行的速度，以米/秒錶示

正如您可能已經猜到的那樣，缺少適當跟踪硬件的設備將無法獲得此 API 的全部好處，因此只會返回一些值而將其他值保留為null 。 例如，在台式計算機上，我們只能接收longitude 、 latitude和accuracy的值，而其他請求的值（ heading 、 speed ）返回null 。

watchPosition() — 定期檢索用戶的位置

雖然上述方法主要用於檢索用戶的位置，但對於依賴用戶精確位置的應用程序而言，它並沒有那麼有用，因為眾所周知，您的用戶經常在移動。 這時候我們需要navigator.geolocation的watchPosition()方法，它會註冊一個回調函數來定期更新用戶的位置。

 navigator.geolocation.watchPosition(位置 => {
    控制台日誌（位置）
})

watchPosition方法返回一個唯一的事務id ，可用於停止接收位置更新。 使用唯一id和navigator.geolocation.clearWatch()方法，我們可以停止監視位置：

 常量 id = navigator.geolocation.watchPosition（位置 => {
    控制台日誌（位置）
})

//10秒後停止觀看
設置超時（（）=> {
  navigator.geolocation.clearWatch(id)
}, 10 * 1000)

錯誤處理

當您沒有設置適當的功能來處理所有錯誤時，它很快就會失控。 要在人類可讀的塊中顯示錯誤，您需要將以下代碼添加到用於顯示位置的函數中：

 功能位置錯誤（錯誤）{
    開關（錯誤代碼）{
        案例錯誤。PERMISSION_DENIED：
            return "用戶拒絕地理定位請求。";
        案例錯誤。POSITION_UNAVAILABLE：
            return "位置信息目前不可用。";
        案例錯誤。超時：
            return "請求用戶位置超時。";
        案例錯誤。未知錯誤：
            return "發生未知錯誤。";
    }
}

此外，您可以在控制台中對此進行測試：

 navigator.geolocation.getCurrentPosition(位置 => {
  控制台日誌（位置）
}, 錯誤 => {
	控制台.錯誤（錯誤）
})

這將返回一個code屬性，其中1表示用戶權限已被拒絕， 2表示用戶位置當前不可用， 3表示請求超時。

超越基礎

了解基礎是一回事，但您始終可以努力做得更好。 以下是您可以如何進一步改進您的地理定位功能。

查找坐標時超時

如果您的用戶網絡狀況不佳，可以使用超時指示操作已過期。 要添加超時，我們需要添加第三個參數，其中包含以下屬性：

• timeout操作過期前的毫秒數。
• maxiumAge瀏覽器緩存的位置的最大年齡，以毫秒為單位。
• enableHighAccuracy一個不言自明的真/假選項，它可能會消耗更多時間和資源以獲取更準確的位置。

 navigator.geolocation.getCurrentPosition(位置 => {
  控制台日誌（位置）
}, 錯誤 => {
	控制台.錯誤（錯誤）
}, {
  超時：2000，
  最大年齡：20000，
  啟用高精度：真
})

在谷歌地圖上顯示用戶位置

使用 Google Maps API，我們可以在 Google Map 上顯示用戶的位置。

 <script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

要在 Web 上演示 Google Map API，我們推薦 Google 的本指南：在地圖上顯示用戶或設備位置。 在指南中，您將找到一個集成了 Google Maps API 的基本 HTML。

或者，對基於 React 的 PWA 使用react-geolocated

如果你不適應它， react-geolocated也是一種快速輕鬆地將地理定位與基於 React 的應用程序集成的好方法。 只需使用以下命令將模塊安裝在現有 PWA之上：

 npm install react-geolocated --save

之後，按照官方 GitHub 鏈接中提供的步驟操作，您應該擁有一個具有內置地理定位功能的 PWA。

結論

這就是 PWA 的地理定位集成過程。 如果您在本教程的任何部分都覺得很難，請不要猶豫，在下面向我們提問！

對於尋求可靠解決方案的 Magento 商家，我們為您的企業提供完整且具有成本效益的 Magento PWA 解決方案。