sendBeacon examples

Copy

var key = "smilecat-beacon-" + (new Date().toISOString().split('T')[0]);
var putsReqUrl = "https://putsreq.herokuapp.com/" + key;
var putsReqInspectUrl = putsReqUrl + "/inspect";

document.querySelector('#inspect-link')
  .addEventListener('click', function (e) {
    e.preventDefault();
    e.stopPropagation();

location.href = putsReqInspectUrl;
  });

document.querySelector('#send-beacon-1')
  .addEventListener('click', function () {
    if (!('sendBeacon' in navigator)) {
      alert('Not support sendBeacon in this browser.');
    }

sendBeacon(putsReqUrl, ("Just sent by a beacon! @" + (new Date())));
  });

document.querySelector('#send-beacon-2')
  .addEventListener('click', function () {
    if (!('sendBeacon' in navigator)) {
      alert('Not support sendBeacon in this browser.');
    }

window.addEventListener('beforeunload', function () {
      sendBeacon(putsReqUrl, ("Sent by a beacon when beforeunload! @" + (new Date())));
    }, false);
  });

document.querySelector('#send-beacon-3')
  .addEventListener('click', function () {
    if (!('sendBeacon' in navigator)) {
      alert('Not support sendBeacon in this browser.');
    }

window.addEventListener('unload', function () {
      sendBeacon(putsReqUrl, ("Sent by a beacon when unload! @" + (new Date())));
    }, false);
  });

document.querySelector('#send-beacon-4')
  .addEventListener('click', function () {
    if (!('sendBeacon' in navigator)) {
      alert('Not support sendBeacon in this browser.');
    }

window.addEventListener('pagehide', function () {
      sendBeacon(putsReqUrl, ("Sent by a beacon when pagehide! @" + (new Date())));
    }, false);
  });

document.querySelector('#send-beacon-5')
  .addEventListener('click', function () {
    if (!('sendBeacon' in navigator)) {
      alert('Not support sendBeacon in this browser.');
    }

throw new Error('Global Error Test');
  });

document.querySelector('#send-beacon-5')
  .addEventListener('click', function () {
    if (!('sendBeacon' in navigator)) {
      alert('Not support sendBeacon in this browser.');
    }

var handler = function (ref) {
      var message = ref.message;
      var filename = ref.filename;
      var lineno = ref.lineno;
      var colno = ref.colno;
      var error = ref.error;

var formData = new FormData();
      formData.append('message', message);
      formData.append('filename', filename);
      formData.append('lineno', lineno);
      formData.append('colno', colno);
      formData.append('error', error);

sendBeacon(putsReqUrl, formData);
      window.removeEventListener('error', handler, false);
    };

window.addEventListener('error', handler, false);

throw ("Sent by a beacon when global error! @" + (new Date()));
  });

document.querySelector('#send-beacon-6')
  .addEventListener('click', function () {
    if (!('sendBeacon' in navigator)) {
      alert('Not support sendBeacon in this browser.');
    }

var request = new XMLHttpRequest();
    request.open('GET', 'http://numbersapi.com/42', false);
    request.send(null);
    if (request.status === 200) {
      console.log(request.responseText);
    }

observer.observe();

// throw `Sent by a beacon when ReportObserver! @${new Date()}`;
  });

document.querySelector('#async-xmlhttprequest')
  .addEventListener('click', function () {
    window.addEventListener('beforeunload', function () {
      sendXMLHttpRequest(putsReqUrl, ("Sent by a async XMLHttpRequest when beforeunload! @" + (new Date())), true);
    }, false);
  });

document.querySelector('#sync-xmlhttprequest')
  .addEventListener('click', function () {
    window.addEventListener('beforeunload', function () {
      sendXMLHttpRequest(putsReqUrl, ("Sent by a sync XMLHttpRequest when beforeunload! @" + (new Date())), false);
    }, false);
  });

function sendBeacon(url, data) {
  navigator.sendBeacon(url, data);
}

function sendXMLHttpRequest(url, data, async) {
  var client = new XMLHttpRequest();
  client.open("POST", url, async);
  client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
  client.send(data);
}

<!DOCTYPE html>
<html>
  <head>
    <title>sendBeacon examples</title>
    <link rel="stylesheet" href="http://www.3daysofprogramming.com/playground/pg.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Map,Set,Promise"></script>

    <style>
      .action-btn {
        display: block;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <p><a id="inspect-link" href="#">PutsReq inspect page</a></p>
    <button class="action-btn" id="send-beacon-1">Just sendBeacon()</button>
    <button class="action-btn" id="send-beacon-2">sendBeacon() with beforeunload</button>
    <button class="action-btn" id="send-beacon-3">sendBeacon() with unload</button>
    <button class="action-btn" id="send-beacon-4">sendBeacon() with pagehide</button>
    <button class="action-btn" id="send-beacon-5">sendBeacon() with global error</button>
    <button class="action-btn" id="send-beacon-6">sendBeacon() with ReportObserver</button>
    <button class="action-btn" id="async-xmlhttprequest">Async XMLHttpRequest</button>
    <button class="action-btn" id="sync-xmlhttprequest">Sync XMLHttpRequest</button>
    <script>
      var key = "smilecat-beacon-" + (new Date().toISOString().split('T')[0]);
      var putsReqUrl = "https://putsreq.herokuapp.com/" + key;
      var putsReqInspectUrl = putsReqUrl + "/inspect";

      document.querySelector('#inspect-link')
        .addEventListener('click', function (e) {
          e.preventDefault();
          e.stopPropagation();

          location.href = putsReqInspectUrl;
        });

      document.querySelector('#send-beacon-1')
        .addEventListener('click', function () {
          if (!('sendBeacon' in navigator)) {
            alert('Not support sendBeacon in this browser.');
          }

          sendBeacon(putsReqUrl, ("Just sent by a beacon! @" + (new Date())));
        });

      document.querySelector('#send-beacon-2')
        .addEventListener('click', function () {
          if (!('sendBeacon' in navigator)) {
            alert('Not support sendBeacon in this browser.');
          }

          window.addEventListener('beforeunload', function () {
            sendBeacon(putsReqUrl, ("Sent by a beacon when beforeunload! @" + (new Date())));
          }, false);
        });

      document.querySelector('#send-beacon-3')
        .addEventListener('click', function () {
          if (!('sendBeacon' in navigator)) {
            alert('Not support sendBeacon in this browser.');
          }

          window.addEventListener('unload', function () {
            sendBeacon(putsReqUrl, ("Sent by a beacon when unload! @" + (new Date())));
          }, false);
        });

      document.querySelector('#send-beacon-4')
        .addEventListener('click', function () {
          if (!('sendBeacon' in navigator)) {
            alert('Not support sendBeacon in this browser.');
          }

          window.addEventListener('pagehide', function () {
            sendBeacon(putsReqUrl, ("Sent by a beacon when pagehide! @" + (new Date())));
          }, false);
        });

      document.querySelector('#send-beacon-5')
        .addEventListener('click', function () {
          if (!('sendBeacon' in navigator)) {
            alert('Not support sendBeacon in this browser.');
          }

          throw new Error('Global Error Test');
        });

      document.querySelector('#send-beacon-5')
        .addEventListener('click', function () {
          if (!('sendBeacon' in navigator)) {
            alert('Not support sendBeacon in this browser.');
          }

          var handler = function (ref) {
            var message = ref.message;
            var filename = ref.filename;
            var lineno = ref.lineno;
            var colno = ref.colno;
            var error = ref.error;

            var formData = new FormData();
            formData.append('message', message);
            formData.append('filename', filename);
            formData.append('lineno', lineno);
            formData.append('colno', colno);
            formData.append('error', error);

            sendBeacon(putsReqUrl, formData);
            window.removeEventListener('error', handler, false);
          };

          window.addEventListener('error', handler, false);

          throw ("Sent by a beacon when global error! @" + (new Date()));
        });

      document.querySelector('#send-beacon-6')
        .addEventListener('click', function () {
          if (!('sendBeacon' in navigator)) {
            alert('Not support sendBeacon in this browser.');
          }

          var request = new XMLHttpRequest();
          request.open('GET', 'http://numbersapi.com/42', false);
          request.send(null);
          if (request.status === 200) {
            console.log(request.responseText);
          }

          var observer = new ReportingObserver(function (reports, observer) {
            reports.forEach(function (report) {
              sendBeacon(putsReqUrl, JSON.stringify(report.body, ['id', 'columnNumber', 'lineNumber', 'message', 'sourceFile']));
            });
            observer.disconnect();
          }, {types: ['intervention', 'deprecation'], buffered: true});

          observer.observe();

          // throw `Sent by a beacon when ReportObserver! @${new Date()}`;
        });

      document.querySelector('#async-xmlhttprequest')
        .addEventListener('click', function () {
          window.addEventListener('beforeunload', function () {
            sendXMLHttpRequest(putsReqUrl, ("Sent by a async XMLHttpRequest when beforeunload! @" + (new Date())), true);
          }, false);
        });

      document.querySelector('#sync-xmlhttprequest')
        .addEventListener('click', function () {
          window.addEventListener('beforeunload', function () {
            sendXMLHttpRequest(putsReqUrl, ("Sent by a sync XMLHttpRequest when beforeunload! @" + (new Date())), false);
          }, false);
        });

      function sendBeacon(url, data) {
        navigator.sendBeacon(url, data);
      }

      function sendXMLHttpRequest(url, data, async) {
        var client = new XMLHttpRequest();
        client.open("POST", url, async);
        client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
        client.send(data);
      }
    </script>
  </body>
</html>