我目前正在构建一个网络应用程序(使用Mapbox在Polymer中(，用户可以在地图上查看特色路线并步行。他们问我是否可以添加一个按钮(开始/停止(来记录他们的活动并计算步行公里数。我构建它的方法是将每个新地理点存储在位置更改事件(navigator.geolocation.watchPosition(上，并计算所有点之间的距离并将它们相加。
现在真正的问题
可能会有用户忘记再次单击停止按钮。如果发生这种情况，应用程序将继续向我的服务器发送数据。这将导致不必要的数据被推送到数据库。
现在我试图为此找到解决方案：
选项 #1
我遇到了使用页面可见性 API 在浏览器中检查活动选项卡的选项。通过这种方式，我可以自动停止/开始跟踪。
if (!document.hidden) {
// resume tracking
} else {
// stop tracking
}
但是，通常我的应用程序的用户会锁定他们的屏幕，这也将停止跟踪，因为visibilityState将被hidden。
选项 #2我的客户提供了在 x 小时后自动停止计时器的解决方案。然而，这听起来并不直观，因为这仍然会导致奇怪的公里数总和。
选项 #3如果您距离特色路线超过 x 米，则自动停止跟踪步行距离。然而，这将需要相当多的计算。
选项 #4跟踪所有用户活动。 例如，在地图上捏合、单击、缩放等，并在 30 分钟无活动后停止跟踪
我应该如何设计此应用程序以确保跟踪有意义？
对于面临与我相同的问题的人，这是我想出的解决方法。
我使用NoSleep.js在后台播放视频，以确保手机不会进入完全睡眠模式。确保仅在用户与您的应用交互时才添加 NoSleep，否则只会耗尽电池电量。
var noSleep = new NoSleep();
document.addEventListener('click', enableNoSleep, false);
function enableNoSleep() {
noSleep.enable();
document.removeEventListener('click', enableNoSleep, false);
}
并确保使用noSleep.disable();禁用它
每当我的应用(使用 Page 可见性 API 在 Chrome 中的活动标签页(再次处于活动状态时，我都会轮询当前位置。
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "visible") this.getCurrentLocation();
});
getCurrentLocation()位置将在名为locationHistory的Array中推送当前位置。
我正在使用 Turf.js 来计算locationHistory数组中先前位置和当前位置之间的距离。
let currentLocation = turf.point(lastpoint);
let previousLocation = turf.point(previouspoint);
let distance = turf.distance(previousLocation, currentLocation);
我将获取当前位置和先前位置之间的距离并将其添加到我的totalDistance中。
如果用户将应用放在口袋里并返回"联机"(打开应用(，它将占用当前位置和先前位置之间的距离。它不是很准确(因为它只会在两点之间取直线(但我做了一些测试，这是我能为 Web 应用程序做的最好的事情。如果用户阻止手机进入锁定模式，结果将更准确。
当您点击开始时，我会在服务器上创建一个时间戳(Firebase 服务器时间戳(，以便我知道用户何时开始跟踪。我也知道系统中最长的路线约为 11 公里，这意味着这应该可以在 3 小时内步行。
我正在运行一些 Firebase Cloud Functions，以查看用户在 3 小时后是否仍在跟踪，并将禁用服务器上的跟踪。当用户在几天后打开应用程序时，它会停止跟踪客户端。
如果您找到更好的解决方案，请告诉我！我很好奇;-(