Can I use sendBeacon to save session duration metric real-time in iOS devices?

Question

I have integrated the timeonsite library to store the time users spend on the site in a MySQL database. I'm using the following code to achieve the same.

However, the data is not getting stored in IOS devices like iPhone or iPad but works in all other browsers like Chrome, Edge, Opera, Firefox, etc. including Android chrome and 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'));

What's the reason for this issue and how to get it resolved?

Answer 1

"NO"

The reason is given here (taken from 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.

---

Real-time API is failing only in IOS devices due to reasons given above but the good thing is, you can use request option to capture the data in delayed manner. Go through the link once to understand it better. But the question remains is, if I use request option for IOS devices, how do I capture real-time for all other browsers in desktop and mobile devices. The tweak is simple, replace the

var config

object with this,

// 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
        }
    };

}

Now, you'll be able to capture data in both ways. Delayed approach(N-1) pageviews for IOS devices and Realtime(N) pageviews for all other browsers in mobile and desktop.