Web applications 关于在web应用程序中计算步行距离的建议

我目前正在开发一个web应用程序（使用Mapbox），用户可以在地图上看到特色路线并步行。他们问我是否可以添加一个按钮（开始/停止）来记录他们的活动并计算行走的公里数。我构建它的方法是将每个新的地质点存储在位置更改事件（

navigator.geolocation.watchPosition

）上，然后计算所有点之间的距离并求和

现在才是真正的问题

可能会有用户忘记再次单击停止按钮。如果发生这种情况，应用程序将继续向我的服务器发送数据。这将导致不必要的数据被推送到数据库

现在我试图找到一个解决方案：

选项#1

我遇到了一个选项，可以使用检查浏览器中的活动选项卡。这样我就可以自动停止/开始跟踪

if (!document.hidden) {
    // resume tracking
} else {
    // stop tracking
}

但是，通常我的应用程序的用户会锁定他们的屏幕，这也会停止跟踪，因为

visibilityState

将

隐藏

选项2
我的客户提供了解决方案，可以在x小时后自动停止计时器。然而，这听起来并不直观，因为这仍然会导致奇怪的公里数

选项#3
如果您距离特色路线超过x米，则自动停止跟踪步行距离。然而，这将需要相当多的计算

选项4
跟踪所有用户活动。例如，在地图上挤压、点击、缩放等，并在30分钟无活动后停止跟踪

我应该如何设计这个应用程序以确保跟踪是有意义的？
对于那些面临与我相同问题的人，我提出了解决方法

我过去常常在后台播放视频，以确保手机不会进入完全睡眠模式。确保只有在用户与你的应用程序交互时才添加NoSleep，否则只会耗尽电池电量

var noSleep = new NoSleep();
document.addEventListener('click', enableNoSleep, false);

function enableNoSleep() {
  noSleep.enable();
  document.removeEventListener('click', enableNoSleep, false);
}

并确保使用
noSleep.disable（）禁用它

每次我的应用程序（使用Chrome中的活动选项卡）再次激活时，我都会轮询当前位置

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") this.getCurrentLocation();
});

getCurrentLocation（）
位置将在名为
locationHistory
的
数组中推送当前位置

我使用来计算
locationHistory
数组中上一个位置和当前位置之间的距离

let currentLocation = turf.point(lastpoint);
let previousLocation = turf.point(previouspoint);
let distance = turf.distance(previousLocation, currentLocation);

我将获取当前位置和上一位置之间的距离，并将其添加到我的
总距离中

如果用户将应用程序放在口袋里，然后返回“在线”（打开应用程序），则将获取当前位置和以前位置之间的距离。它不是超精确的（因为它只在两点之间取直线）（但我做了一些测试，这是我能为web应用程序做的最好的测试。如果用户阻止手机进入锁定模式，结果会更精确

当您点击开始时，我会在服务器上创建一个时间戳（），这样我就知道用户何时开始跟踪。我还知道系统中最长的路线大约为11公里，这意味着这应该可以在3小时内步行

我正在运行一些Firebase云功能，以查看用户在3小时后是否仍在跟踪，并将禁用服务器上的跟踪。当用户在几天后打开应用程序时，它将停止跟踪客户端

如果您找到了更好的解决方案，请告诉我！我很好奇；-）
使用ionic使本机类似于webapp。只有使用这样的框架，您才能解决这个问题。