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

Question

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

但是，数据不会存储在 iPhone 或 iPad 等 IOS 设备中，但可以在 Chrome、Edge、Opera、Firefox 等所有其他浏览器(包括 Android chrome 和 Firefox)中使用。

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" event is not at all supported in IOS devices like Iphone, Ipad and mobile safari browser. For these devices alone, we have to fallback to "request option/localStorage" for the time being by checking Navigator.platform while initiating the tracker. It's a win-win situation for us since we can track all devices real-time except IOS devices for which we can safely apply "request object option" and get the last record later on for now.

---

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

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) 页面浏览量。