我可以使用 sendBeacon 在 iOS 设备中实时保存会话持续时间指标吗？

Question

我已经集成了timeonsite 库，以将用户在网站上花费的时间存储在 MySQL 数据库中。我正在使用以下代码来实现相同的目的。

但是，数据不会存储在 iPhone 或 iPad 等 IOS 设备中，而是适用于所有其他浏览器，如 Chrome、Edge、Opera、Firefox 等，包括 Android chrome 和 firefox。 p>

var Tos;
(function(d, s, id, file) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s);
  js.id = id;
  js.onload = function() {

    var config = {
      trackBy: 'seconds',
      callback: function(data) {
        console.log(data);
        // give your endpoint URL server-side URL
        // that is going to handle your TOS data which is of POST method.
        // Eg. PHP, nodejs or python URL which saves this data to your DB

        // replace with your endpoint URL
        var endPointUrl = 'http://localhost:4500/tos';

        if (data && data.trackingType) {
          if (data.trackingType == 'tos') {
            if (Tos.verifyData(data) != 'valid') {
              console.log('Data abolished!');
              return;
            }
          }

          // make use of sendBeacon if this API is supported by your browser.
          // sendBeacon is experimental technology; it may not work well
          if (navigator && typeof navigator.sendBeacon === 'function') {
            var blob = new Blob([JSON.stringify(data)], {
              type: 'application/json'
            });
            navigator.sendBeacon(endPointUrl, blob);
          }

        }
      }
    };

    if (TimeOnSiteTracker) {
      Tos = new TimeOnSiteTracker(config);
    }
  };
  js.src = file;
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'TimeOnSiteTracker', 'https://cdnjs.cloudflare.com/ajax/libs/timeonsite/1.2.0/timeonsitetracker.js'));

此问题的原因是什么以及如何解决？

Answer 1

“否”

这里给出原因（取自https://github.com/saleemkce/timeonsite/issues/9）

---

"beforeunload" 事件在 IOS 设备中完全不受支持，例如 Iphone、Ipad 和移动 safari 浏览器。仅对于这些设备，我们 暂时不得不回退到“请求选项/localStorage” 通过在启动跟踪器时检查 Navigator.platform。它是 对我们来说是双赢的局面，因为我们可以实时跟踪所有设备 除了我们可以安全地应用“请求对象”的IOS设备 选项”，然后暂时获取最后一条记录。

---

由于上述原因，实时 API 仅在 IOS 设备中失败，但好处是，您可以使用 request 选项以延迟方式捕获数据.通过链接一次以更好地理解它。但问题仍然存在，如果我对 IOS 设备使用 request 选项，我如何为桌面和移动设备中的所有其他浏览器实时捕获。调整很简单，替换

var config

对象，

// checking for IOS based browser or not
var isIOS = (/iPad|iPhone|iPod/i.test(navigator.platform)) && !window.MSStream;

if (!isIOS) { /* All browsers desktop and mobile except IOS devices */
    var config = {
        // track page by seconds. Default tracking is by milliseconds
        trackBy: 'seconds',

        callback: function(data) { /* callback denotes your data tracking is real-time */
            console.log(data);
            if (data && data.trackingType) {
                if (data.trackingType == 'tos') {
                    if (Tos.verifyData(data) != 'valid') {
                        console.log('Data abolished!');
                        return; 
                    }
                }
                
                // make use of sendBeacon if this API is supported by your browser.
                if (navigator && typeof navigator.sendBeacon === 'function') {
                    data.trasferredWith = 'sendBeacon';
                    var blob = new Blob([JSON.stringify(data)], {type : 'application/json'});
                    navigator.sendBeacon(endPointUrl, blob);
                }
            }
        }
    };

} else { /* For IOS devices only since "beforeunload" event is not supported */
    var config = {
        // track page by seconds. Default tracking is by milliseconds
        trackBy: 'seconds',
    
        request: { /* Presence of request object denotes we're going to use Localstorage */
            url: endPointUrl
        }
    };

}

现在，您将能够以两种方式捕获数据。 IOS 设备的延迟接近 (N-1) 次网页浏览和所有其他移动和桌面浏览器的实时 (N) 次网页浏览。