作为一款优秀的 PWA 应用，地理定位是不可或缺的功能之一。PWA 应用如果能够根据用户当前的地理位置进行特定的处理，将会给用户带来更好的使用体验。本文将介绍如何在 PWA 应用中实现地理定位，同时提供相应的示例代码，希望能够对前端工程师们有所帮助。
浏览器地理定位 API
现代的浏览器都提供了地理定位的 API，通过浏览器的地理定位 API，我们可以很轻松地获取当前设备所在的经纬度坐标。在实现地理定位功能之前，我们先来了解一下这个 API 的用法。
获取当前位置
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
console.log("Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude);
});
} else {
console.log("Geolocation is not supported by this browser.");
}在调用 getCurrentPosition() 方法时，我们可以传递一个回调函数作为参数。当成功获取到当前位置信息时，浏览器会调用这个回调函数，并把当前位置信息作为参数传递进去。
上述例子中，我们首先判断当前设备是否支持浏览器地理定位 API，如果支持，则调用 getCurrentPosition() 方法。在成功获取到当前位置信息时，我们打印出了设备当前的经纬度坐标。
持续定位
如果你需要实现持续的定位功能，可以通过 watchPosition() 方法来实现。
if (navigator.geolocation) {
navigator.geolocation.watchPosition(function(position) {
console.log("Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude);
});
} else {
console.log("Geolocation is not supported by this browser.");
}调用 watchPosition() 方法可以让浏览器不停地检测当前设备的位置，每次成功获取到新的位置信息后都会调用回调函数，并把新的位置信息作为参数传递进去。
在 PWA 中实现地理定位
掌握了浏览器地理定位 API 的用法之后，我们来看一下如何在 PWA 应用中实现地理定位。
添加权限请求
在进行地理定位之前，我们需要先向用户请求获取其位置信息的权限。我们可以通过以下方式在浏览器中发起权限请求：
await navigator.permissions.query({name:'geolocation'});如果用户同意了我们的请求，我们就可以通过 getCurrentPosition() 获取到他的位置信息，否则就需要给出相应的提示。
实现位置缓存
为了减少用户对位置权限的反复请求，我们可以通过实现位置缓存的方式将用户的位置信息存储起来，下次需要使用时直接从缓存中取出即可。以下是一种简单的实现方式：
-- -------------------- ---- -------
-- ---------------------------------------- -
-- ------------
----- ---------- ---------- ---------- - ---------------------------------------------------
------------------ ------ --------- --------- ------------ ---------- ------------- ---------- ---------------
- ---- -
-- -- -------------------- ----------
--------------------------------------------------- -- -
----- ---------- ---------- - ----------------
----- --------- - -----------
-------------------------------------- ------------------------- ---------- -------------
---------------- -------- ------- --------- ------------ ---------- ------------- ---------- ---------------
---
-在初始化 PWA 应用时，我们首先检查本地是否有缓存的位置信息。如果有，则从缓存中读取位置信息，并使用缓存中的经纬度坐标对用户进行相应的处理。否则，我们调用 getCurrentPosition() 方法来获取当前位置信息，并将获取到的位置信息存储到本地缓存中。
更新位置缓存
如果用户的位置信息发生了变化，我们需要重新更新缓存中的位置信息。我们可以通过再次调用 getCurrentPosition() 方法来实现：
setInterval(() => {
navigator.geolocation.getCurrentPosition((position) => {
const {latitude, longitude} = position.coords;
const timestamp = Date.now();
localStorage.setItem('cachedPosition', JSON.stringify({latitude, longitude, timestamp}));
console.log(`Position cached: Latitude: ${latitude}, Longitude: ${longitude}, Timestamp: ${timestamp}`);
});
}, 10000);在上述例子中，我们使用了定时器每隔 10 秒钟就调用一次 getCurrentPosition() 方法来更新缓存中的位置信息。
示例代码
下面是一个完整的 PWA 应用中地理定位的代码实现：
-- -------------------- ---- -------
----- -------- ---------------------------- -
----- ---------- - ----- --------------------------------------------------
-- ----------------- --- ---------- -
-- ----------
------ -----
- ---- -- ----------------- --- --------- -
-- --------------------
----- -------- - ----- ----------------------------------------------------
-- --------------- --- ---------- -
------ -----
- ---- -
------------------- --------------------
------ ------
-
- ---- -
-- ---------------
------------------- ----------------------
------ ------
-
-
----- -------- ------ -
----- ---------------- - ----- -----------------------------
-- ----------------- -- --------------------------------------- -
-- ----------
----- ---------- ---------- ---------- - ---------------------------------------------------
------------------ ------ --------- --------- ------------ ---------- ------------- ---------- ---------------
- ---- -- ------------------ -
-- --------
--------------------------------------------------- -- -
----- ---------- ---------- - ----------------
----- --------- - -----------
-------------------------------------- ------------------------- ---------- -------------
---------------- -------- ------- --------- ------------ ---------- ------------- ---------- ---------------
-- -------------
-------------- -- -
--------------------------------------------------- -- -
----- ---------- ---------- - ----------------
----- --------- - -----------
-------------------------------------- ------------------------- ---------- -------------
--------------------- ------- --------- ------------ ---------- ------------- ---------- ---------------
---
-- -------
---
-
-
-------总结
通过本文的介绍，我们了解了浏览器地理位置 API 的用法，并学会如何在 PWA 应用中实现地理定位功能和位置缓存的功能。这些技术不仅仅局限于地理定位，对于其他需要使用到设备硬件信息的 PWA 应用也同样适用。希望本文对相关前端工程师有所启迪和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6488599d48841e98946db703