iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

前端三分鐘 X Progressive Web App 30 天製造解密系列 第 28

Progressive Web App 取得 Geolocation API 地理資訊 (28)

什麼是 Geolocation API?

透過 Geolocation API 可以讓 Progressive Web App 存取用戶的位置,方便實作地理資訊相關應用。

怎麼使用 Geolocation API?

  1. 檢查支援度,然後針對支援的部分做漸進式增強,如果不支援的話可以使用 GEO IP 相關服務,雖然較不準確,但仍然有一定的參考價值。
    • https://get.geojs.io/v1/ip/geo.json
if (navigator.geolocation) {
  console.log("Geolocation is supported!");
} else {
  console.log("Geolocation is not supported for this Browser/OS.");
}
  1. 使用 navigator.geolocation.getCurrentPosition 一次性取得用戶地理位置資訊。
var startPos;
var geoSuccess = function (position) {
  startPos = position;
  console.log(
    "lat",
    startPos.coords.latitude,
    "lng",
    startPos.coords.longitude
  );
};
navigator.geolocation.getCurrentPosition(geoSuccess);
  1. 使用 navigator.geolocation.watchPosition 持續追蹤用戶地理位置資訊
    • enableHighAccuracy: 啟用後解析速度會下降,並且電池耗電會增加
    • timeout: 避免讓用戶等太久,所以設置 timeout,超過就會跑錯誤處理
var id, target, options;

function success(pos) {
  var crd = pos.coords;

  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
    console.log("成功追蹤");
    navigator.geolocation.clearWatch(id);
  }
}

function error(err) {
  console.warn("ERROR(" + err.code + "): " + err.message);
}

target = {
  latitude: 0,
  longitude: 0,
};

options = {
  enableHighAccuracy: false,
  timeout: 5000,
  maximumAge: 0,
};

id = navigator.geolocation.watchPosition(success, error, options);
  1. 不需要持續追蹤的時候,要記得使用 clearWatch
navigator.geolocation.clearWatch(id);

請求權限

讓使用者同意位置共用的時機,在 App 啟動時就請求權限會是最爛的時機,而且對於在頁面載入時要求提供位置的網站,用戶通常會不信任。

在 Android 5.0 之後的實作上也是在要使用時才會向使用者請求權限,所以在實作上要假設:

  • 假設使用者不會提供位置
  • 說明為什麼需要存取使用者位置

在用戶使用特定功能時才讓用戶主動操作並出現提示,且要準備好使用被拒絕的備案。

圖片來源: https://developers.google.com/


上一篇
Progressive Web App 針對應用操作介面優化操作體驗 (27)
下一篇
Progressive Web App NFC 入門實作 (29)
系列文
前端三分鐘 X Progressive Web App 30 天製造解密30

尚未有邦友留言

立即登入留言