PWA 获取位置信息的坑点解析-JavaScript中文网-JavaScript教程资源分享门户

前言

早在2015年，Google就提出了PWA，Progressive Web App，随着web技术的不断发展，相信某些日子PWA一定会有一个更大的市场，但是在初期的使用过程中，还存在诸多问题，其中获取位置信息就是一个非常棘手的问题。本文将从多个角度出发，解析PWA获取位置信息的坑点，并提供一些解决方法，帮助开发者更好地处理PWA应用中的位置问题。

获取位置信息的方式

在深度了解获取位置信息的坑点之前，我们需要先对获取位置的方式有所了解。目前有三种方式可以获取位置信息：

第一种是利用HTML5中的Geolocation API，在可以使用的设备上，可以通过调用geolocation.getCurrentPosition()来获取到当前位置的纬度和经度。

-- -------------------- ---- -------
-- ----------------------- -
  ----------------------------------------------------------- -
    --- --- - -------------------------
    --- --- - --------------------------
    -------------------- - --- - --- - -----
  ---
- ---- -
  ---------------------------
-

第二种是通过IP地址来获取当前位置信息。这种方式不需要用户授权，但是由于IP地址的准确性比较低，因此获取的位置信息可能不太准确，但是可以作为一种备选方案。

$.get("https://ipapi.co/json/", function(response) {
  console.log("您的位置是：" + response.latitude + "," + response.longitude);
}, "json");

第三种是通过用户输入的位置信息来获取当前位置，这种方式需要用户手动输入自己的位置信息，然后再通过Google Map等第三方接口将地址转换为经纬度坐标，然后再将得到的坐标用于获取周边信息等操作。

PWA 中获取位置信息的问题

上面提到的三种方式在PWA应用中都可以正常使用，但是我们在实际开发中发现，在特定场景下，使用HTML5的Geolocation API获取位置信息时并不如我们所愿，甚至会导致程序出错。下面我们来探讨一下会出现哪些问题。

程序报错

在PWA应用中使用Geolocation API可能会出现程序报错的现象。最常见的错误是POSITION_UNAVAILABLE和TIMEOUT，这两个错误一般是因为无法获取到用户的位置或者获取位置超时。在这种情况下，仔细检查代码、定位错误、加入容错机制等都是处理该问题的关键。

用户隐私保护

PWA应用中，获取位置信息需要用户授权，因此，为了保护用户隐私，我们不能在用户不知情的情况下获取其位置信息，也不能只是在授权时获取其位置，通常我们应该提前告知用户需要获取他们的位置，以便用户能够知情并给予授权。同时，应注意及时停止获取位置，避免用户数据泄露的问题。

PWA应用不支持HTTP协议

由于PWA应用只支持HTTPS协议，因此，在使用Geolocation API时需要注意，因为该API只在通过HTTPS协议访问的页面中才能正常工作，否则会因为安全机制的限制而无法使用。

PWA应用对浏览器权限的要求

在使用Geolocation API时，则需要查看其在各个浏览器上的权限和支持情况。有些浏览器可能会因为安全机制而禁止该功能。因此，我们在选择浏览器时要了解清楚该浏览器的支持情况。

错误信息的伪造

在实际开发中，我们有时发现提示错误并非真实的错误，这是由于一些浏览器存在伪造错误信息的行为造成的。因此，在遇到错误时，最好手动检查其是否真实存在，从而避免程序出现错误。

解决方案

加入容错机制

在应对程序报错时，要尽可能加入容错机制，对外部异常进行处理。当然，这里的错误处理逻辑并不单一，可以根据实际情况制定不同的处理方案，例如提供多个获取位置信息的方案，例如在用户授权时提示清楚正在获取位置信息等等。

明确请求权限和检查是否获取成功

由于获取位置信息需要用户授权，因此我们应该采取一些明确请求权限的方法，例如用户可以直观地看到自己是否已经被请求授权。此外，在获取位置信息时，也需要在页面上显示一个载入指示器，以通知用户请求是否已经发送，并等待反馈是否成功。

切换为HTTPS协议

PWA应用只支持HTTPS协议，因此如果需要使用Geolocation API，就必须将网站切换为HTTPS协议，否则会因为安全机制的限制而无法使用。另外，还需了解 HTTPS 证书的正确配置方法。

清楚各个浏览器的限制

不同的浏览器对Geolocation API的支持和权限都有不同的要求，因此，在使用该API时，应该清楚不同浏览器支持的情况，并根据实际情况进行不同的处理。在测试环节我们也应该针对不同的浏览器进行测试，找出问题所在。

适时停止获取位置

在获取位置信息的过程中，我们应该了解何时应该停止获取位置信息，避免用户隐私泄露或者使用时间过长造成浪费。通常，用户位置只有在第一次访问或者在切换城市时才需要获取，完成这些操作后，就可以适时停止获取位置信息了。

总结

由于PWA的开发环境与Web应用有所不同，所以在使用Geolocation API时，开发者需要十分谨慎，尽可能注意处理与获取用户位置有关的隐私问题，掌握其工作机制和限制，并合理掌握其使用时机和方法。同时，针对开发中可能出现的错误加以处理是解决问题的基本方法，正如这篇文章所述：PWA获取位置信息的坑点解析，为PWA开发者们提供灵感和指导的同时，也帮助他们少走弯路。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/649bc91f48841e989488a3de