为什么从 Firefox 浏览器访问时，现场时间数据没有保存在数据库中？答案

【问题标题】：Why is time-on-site data not getting saved in DB when accessed from Firefox browser?为什么从 Firefox 浏览器访问时，现场时间数据没有保存在数据库中？
【发布时间】：2021-06-28 16:00:49
【问题描述】：

我们根据文档中的说明在我们的网站中包含了 timeonsite 库 timeonsitetracker

<script type="text/javascript">
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() {
        // save with XMLHttpRequest or sendBeacon
    var config = {
        trackBy: 'seconds',
        developerMode: true,
        callback: function(data) {
            console.log('***');  
            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

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

            if (data && data.trackingType) {
                if (data.trackingType == 'tos') {
                    if (Tos.verifyData(data) != 'valid') {
                        console.log('Data abolished!');
                        return; 
                    }
                }
                
                if (navigator && typeof navigator.sendBeacon === 'function') {
                    data.trasferredWith = 'sendBeacon';
                    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', '//cdn.jsdelivr.net/gh/saleemkce/timeonsite@1.1.0/timeonsitetracker.min.js'));
</script>

刷新浏览器后，我在 Firefox Web 控制台中看到了正确记录的数据（启用日志持久性，否则每次刷新时都会清除日志）。

***
{
    TOSId: 14650383319214848
    TOSSessionKey: "8808159448467693499978"
    TOSUserId: "anonymous"
    URL: "https://localhost/index.html"
    currentTime: "2021-03-30 16:25:17.908"
    entryTime: "2021-03-30 16:24:36.911"
    timeOnPage: 41
    timeOnPageByDuration: "0d 00h 00m 41s"
    timeOnPageTrackedBy: "second"
    timeOnSite: 41
    timeOnSiteByDuration: "0d 00h 00m 41s"
    title: "home page - rental crown"
    trackingType: "tos"
}

但此会话数据并未存储在 MariaDB 中。不知道数据的去向。在刷新第二页时，我再次在 Firefox Web 控制台中看到更新的数据对象，但在 MariaDB 中没有捕获数据。它在 Chrome 中工作，但似乎没有将数据正确存储在数据库中。知道如何解决 Firefox 中的问题吗？

我关注了documentation here。非常感谢您的帮助。

【问题讨论】：

为什么不同时发布您的服务器端代码以便我们审核？
我使用开发人员为这个https://github.com/saleemkce/visual/tree/master/backend 提供的免费后端代码库“visual”@ PHP 和 NodeJs 的完整后端代码可以在这个后端文件夹中看到。我使用 PHP。我认为问题可能不会出现在后端，因为它在 Chrome 中有效。

标签： javascript firefox mariadb analytics

【解决方案1】：

我今天再次测试了这个。似乎 sendBeacon 在 Chrome、Firefox 等许多浏览器上都无法正常工作。 Chrome 和 Firefox 都存在一些未解决的问题。

但是今天，我在 Chrome 和 Firefox 上使用 timeOnSite tracker JS 再次对其进行了测试。它似乎在页面刷新、标签关闭或浏览器关闭场景中成功地将数据发布到数据库。

更新日期：2021 年 11 月 13 日

浏览器工作成功版本：

Chrome：95.0.4638.69

火狐：94.0.1

但请注意，这可能不适用于旧浏览器或不完全支持 sendBeacon 的浏览器。因此，如果在此类浏览器上无法获得实时站点数据，请使用请求对象回退到 localstorage 选项。

var config = {
    trackBy: 'seconds',
    
    request: { // presence of request object denotes that data is to be saved in local storage
        url: 'http://localhost:4500/tos'
    }
}

【讨论】：