Unload send beacon

README.md

@@ -33,6 +33,7 @@
                 requestInterval: 5000,
                 eventTypes: [
                     'start',
+                    'unload',
                     'focus',
                     'click',
                     'submit'

src/api.js

@@ -17,6 +17,12 @@ export default class API {
             .then(this._json);
     }
 
+    sendBeacon(data) {
+        if (navigator && navigator.sendBeacon) {
+            return navigator.sendBeacon(this._url, data);
+        }
+    }
+
     _status(response) {
         if (response.status >= 200 && response.status < 300) {
             return Promise.resolve(response);

src/event-collection.js

@@ -1,36 +1,48 @@
-// LocalStorage using commented until decision about further using
+// LocalStorage using is commented until decision about further using
 // import LocalStorage from './local-storage';
 
 export default class EventCollection {
-    constructor({requestInterval, commonData}, {api}) {
+    constructor({requestInterval, commonData}, {api, logDataProvider}) {
         this._api = api;
+        this._logDataProvider = logDataProvider;
+        this._commonData = commonData;
         // this._ls = new LocalStorage();
 
         this._events = [];
 
         this._timerId = window.setInterval(() => {
-            // const cachedEvents = this._ls.get('events') || [];
-            // const sentEvents = [...cachedEvents, ...this._events];
-            const sentEvents = [...this._events];
+            this.sendEvents();
+        }, requestInterval);
+    }
 
-            if (!sentEvents.length) return;
+    sendEvents(isBeacon) {
+        // const cachedEvents = this._ls.get('events') || [];
+        // const sentEvents = [...cachedEvents, ...this._events];
+        const sentEvents = [...this._events];
 
-            this._events = [];
+        if (!sentEvents.length) return;
 
-            this._api.post({
-                commonData,
-                events: sentEvents
-            })
+        this._events = [];
+        const data = {
+            commonData: this._commonData,
+            events: sentEvents
+        };
+
+        if (isBeacon) {
+            this._api.sendBeacon(data);
+        } else {
+            this._api.post(data)
             // .then(r => { this._ls.remove('events'); })
             .catch(e => {
                 // this._ls.set('events', sentEvents);
-                this._events =  [...sentEvents, ...this._events];
+                this._events = [...sentEvents, ...this._events];
             });
-        }, requestInterval);
+        }
     }
 
     push(event) {
-        this._events.push(event);
+        const logData = this._logDataProvider.getLogData(event);
+        this._events.push(logData);
     }
 
     destroy() {

src/event-listeners/event-listener-factory.js

@@ -2,11 +2,16 @@ import EventListener from "./event-listener";
 
 import EventListenerClick from './event-listener-click';
 import EventListenerFocus from './event-listener-focus';
+import EventListenerUnload from './event-listener-unload';
 
 export default function eventListenerFactory(config, dependencies) {
     let Klass;
 
     switch (config.type) {
+        case 'unload':
+            Klass = EventListenerUnload;
+            break;
+
         case 'click':
             Klass = EventListenerClick;
             break;

src/event-listeners/event-listener-unload.js

@@ -0,0 +1,15 @@
+import EventListener from './event-listener';
+
+export default class EventListenerUnload extends EventListener {
+    constructor(config, dependencies) {
+        super(config, dependencies);
+
+        this._eventCollection = dependencies.eventCollection;
+    }
+
+    handleEvent(event) {
+        super.handleEvent(event);
+
+        this._eventCollection.sendEvents(true);
+    }
+}

src/event-listeners/event-listener.js

@@ -19,8 +19,7 @@ export default class EventListener {
     }
 
     handleEvent(event) {
-        const logData = this._logDataProvider.getLogData(event); // todo: move logDataProvider to eventCollection.push method
-        this._eventCollection.push(logData);
+        this._eventCollection.push(event);
     }
 
     register() {

src/index.html

@@ -316,6 +316,7 @@ <h4 class="mb-3">Payment</h4>
                 requestInterval: 5000,
                 eventTypes: [
                     'start',
+                    'unload',
                     'focus',
                     'click',
                     'submit',