feat(User Interaction): Send analytics at end of session

- Web sites often want to send analytics or diagnostics to the server when the user has finished with the page.
The most reliable way to do this is to send the data on the visibilitychange event.

- Reorganize library directory structure

Author: booleanhunter

src/examples/components/templates/LandingPageOne/index.tsx

@@ -8,20 +8,23 @@ import Card from '../../widgets/Card';
 import UserInteractionResource, { UserInteraction } from 'library/resources/userInteractionResource';
 import { DataContext } from 'library/react/contexts/dataContext';
 import { workerInstance } from 'library/data-processing/web-worker';
+import { initializeBeacon } from 'library/browser/storage';
 
 import { ButtonWithTracking } from '../../elements/Button';
 import { InputWithTracking } from '../../elements/Input';
 import { MenuItemWithTracking } from '../../elements/Menu/MenuItem';
 
 const worker = workerInstance.getInstance();
 
-worker.init({
+worker.start({
     resourceLimit: 5,
     ttl: 7000,
     apiUrl: 'http://localhost:3000/events',
     dataKey: "events"
 });
 
+initializeBeacon("events", 'http://localhost:3000/events');
+
 const { Content } = Layout;
 
 export interface LandingPageProps extends NavbarProps {

src/examples/components/templates/LoginForm/index.tsx

@@ -9,7 +9,7 @@ import { DataContext } from 'library/react/contexts/dataContext';
 import Button, { ButtonWithTracking } from '../../elements/Button';
 import Input, { InputWithTracking } from '../../elements/Input';
 import Card from '../../widgets/Card';
-import { useEffect } from 'react';
+
 export interface LoginFormProps {
 
 }
@@ -22,13 +22,6 @@ const data = {
 } as UserInteraction.DataContext;
 
 function LoginForm(props: LoginFormProps) {
-    // useEffect(() => {
-    //     if(typeof(window.Worker) !== 'undefined') {
-            
-    //         newWorker = new WebWorker(worker)
-            
-    //     }
-    // },[])
 
     function verifyUsernameAndPassword(e: React.MouseEvent<HTMLElement, MouseEvent>) {
         // app logic goes here
@@ -46,7 +39,6 @@ function LoginForm(props: LoginFormProps) {
             do whatever you want with the resource,
             like save it to IndexedDB, compress it, save it via API, etc
         */
-        //console.log("worker is", worker)
 
     }
 
@@ -125,4 +117,4 @@ function LoginForm(props: LoginFormProps) {
     )
 }
 
-export default LoginForm;
+export default LoginForm;

src/library/browser/storage.ts

@@ -0,0 +1,36 @@
+import localforage from 'localforage';
+import UserInteractionResource from '../resources/userInteractionResource';
+
+export function retrieveData(key: string) {
+    return localforage.getItem(key)
+}
+
+export function saveData(key: string, data: UserInteractionResource[]) : Promise<void> {
+    return localforage.setItem(key, data)
+        .then((result) => {
+            // console.log(result)
+        })
+        .catch((err) => {
+            console.error("Error saving data", err)
+        });
+}
+
+export function clearData() {
+    localforage.clear()
+}
+
+export async function initializeBeacon(dataKey: string, apiUrl: string) {
+    document.addEventListener('visibilitychange', async function () {
+        if (document.visibilityState === 'hidden') {
+            const eventsData = await retrieveData(dataKey) as any[];
+            if (eventsData) {
+                var blob = new Blob([JSON.stringify(eventsData)], { type: "text/plain" });
+                const returnValue = navigator.sendBeacon(apiUrl, blob);
+
+                if (returnValue) {
+                    clearData();
+                }
+            }
+        }
+    });
+}

src/library/data-processing/storage.ts renamed to src/library/browser/user-interaction.ts

@@ -1,8 +1,8 @@
-import localforage from 'localforage';
-
 import UserInteractionResource from '../resources/userInteractionResource';
 
-import { gzip } from './compression';
+import { gzip } from '../data-processing/compression';
+
+import { retrieveData, saveData, clearData } from '../browser/storage';
 
 declare let self: WorkerGlobalScope;
 
@@ -29,15 +29,19 @@ const STORAGE_SETTINGS_DEFAULTS : Required<StorageSettings> = {
 let storageSettings : Required<StorageSettings> = STORAGE_SETTINGS_DEFAULTS;
 let isAppLoaded : boolean = true;
 
-export async function init(options: StorageSettings) {
+export async function start(options: StorageSettings) {
+    init(options);
+
+    reAttemptSync(storageSettings.apiUrl, storageSettings.ttl, storageSettings.dataKey);
+}
+
+export function init(options: StorageSettings) {
     if (storageSettings.resourceLimit === 0) {
         storageSettings = {
             ...options,
             dataKey: options.dataKey ? options.dataKey : storageSettings.dataKey,
         };
     }
-
-    reAttemptSync(storageSettings.apiUrl, storageSettings.ttl, storageSettings.dataKey);
 }
 
 export function getConfig() {
@@ -106,24 +110,6 @@ function reAttemptSync(url: string, ttl: number, key: string) {
 
 }
 
-export function retrieveData(key: string) {
-    return localforage.getItem(key)
-}
-
-export function saveData(key: string, data: UserInteractionResource[]) : Promise<void> {
-    return localforage.setItem(key, data)
-        .then((result) => {
-            // console.log(result)
-        })
-        .catch((err) => {
-            console.error("Error saving data", err)
-        });
-}
-
-export function clearData() {
-    localforage.clear()
-}
-
 export async function syncData(url: string, data: Uint8Array) {
     const response = await fetch(url, {
             method: 'POST',

src/library/interaction-tracking/browser.ts renamed to src/library/browser/utils.ts

@@ -7,7 +7,7 @@ export interface OSDetails{
  * Returns the Operating System information
  *
  */
-export function getUserOS() : OSDetails {
+ export function getUserOS() : OSDetails {
     const userAgent = window.navigator.userAgent;
     const platform = window.navigator.platform;
     const macosPlatforms = ["Macintosh", "MacIntel", "MacPPC", "Mac68K"];
@@ -32,4 +32,4 @@ export function getUserOS() : OSDetails {
         name,
         version: ""
     };
-}
+}

src/library/data-processing/web-worker.ts

@@ -1,5 +1,5 @@
 // @ts-ignore
-import worker from 'workerize-loader!./storage.ts'; // eslint-disable-line import/no-webpack-loader-syntax
+import worker from 'workerize-loader!../browser/user-interaction.ts'; // eslint-disable-line import/no-webpack-loader-syntax
 
 export const workerInstance = (function () {
     let instance: any;
@@ -16,11 +16,3 @@ export const workerInstance = (function () {
     }
 
 })();
-
-window.addEventListener("beforeunload", function (e) {
-    var confirmationMessage = "\o/";
- 
-    (e || window.event).returnValue = confirmationMessage;     // Gecko + IE
-    return confirmationMessage;                                /* Safari, Chrome, and other
-                                                                * WebKit-derived browsers */
-}, false);

src/library/resources/userInteractionResource.ts

@@ -1,6 +1,6 @@
 import BaseResource from './baseResource';
 
-import { getUserOS } from '../interaction-tracking/browser';
+import { getUserOS } from '../browser/utils';
 
 export type Object<T> = {
     [P in keyof T]: T[P]