@splitsoftware/splitio-commons 1.4.2-rc.1 → 1.4.2-rc.4

package/cjs/listeners/browser.js

@@ -8,11 +8,12 @@ var objectAssign_1 = require("../utils/lang/objectAssign");
 var constants_2 = require("../logger/constants");
 var consent_1 = require("../consent");
 var telemetrySubmitter_1 = require("../sync/submitters/telemetrySubmitter");
-// 'unload' event is used instead of 'beforeunload', since 'unload' is not a cancelable event, so no other listeners can stop the event from occurring.
+var VISIBILITYCHANGE_EVENT = 'visibilitychange';
+var PAGEHIDE_EVENT = 'pagehide';
 var UNLOAD_DOM_EVENT = 'unload';
 var EVENT_NAME = 'for unload page event.';
 /**
- * We'll listen for 'unload' event over the window object, since it's the standard way to listen page reload and close.
+ * We'll listen for events over the window object.
  */
 var BrowserSignalListener = /** @class */ (function () {
     function BrowserSignalListener(syncManager, settings, storage, serviceApi) {
@@ -21,30 +22,43 @@ var BrowserSignalListener = /** @class */ (function () {
         this.storage = storage;
         this.serviceApi = serviceApi;
         this.flushData = this.flushData.bind(this);
+        this.flushDataIfHidden = this.flushDataIfHidden.bind(this);
+        this.stopSync = this.stopSync.bind(this);
         this.fromImpressionsCollector = impressionsSubmitter_1.fromImpressionsCollector.bind(undefined, settings.core.labelsEnabled);
     }
     /**
      * start method.
-     * Called when SplitFactory is initialized.
-     * We add a handler on unload events. The handler flushes remaining impressions and events to the backend.
+     * Called when SplitFactory is initialized, it adds event listeners to close streaming and flush impressions and events.
      */
     BrowserSignalListener.prototype.start = function () {
         if (typeof window !== 'undefined' && window.addEventListener) {
             this.settings.log.debug(constants_2.CLEANUP_REGISTERING, [EVENT_NAME]);
-            window.addEventListener(UNLOAD_DOM_EVENT, this.flushData);
+            // Flush data whenever the page is hidden or unloaded.
+            window.addEventListener(VISIBILITYCHANGE_EVENT, this.flushDataIfHidden);
+            // Some browsers like Safari does not fire the `visibilitychange` event when the page is being unloaded. So we also flush data in the `pagehide` event.
+            // If both events are triggered, the last one will find the storage empty, so no duplicated data will be submitted.
+            window.addEventListener(PAGEHIDE_EVENT, this.flushData);
+            // Stop streaming on 'unload' event. Used instead of 'beforeunload', because 'unload' is not a cancelable event, so no other listeners can stop the event from occurring.
+            window.addEventListener(UNLOAD_DOM_EVENT, this.stopSync);
         }
     };
     /**
      * stop method.
-     * Called when client is destroyed.
-     * We need to remove the handler for unload events, since it can break if called when Split context was destroyed.
+     * Called when client is destroyed, it removes event listeners.
      */
     BrowserSignalListener.prototype.stop = function () {
         if (typeof window !== 'undefined' && window.removeEventListener) {
             this.settings.log.debug(constants_2.CLEANUP_DEREGISTERING, [EVENT_NAME]);
-            window.removeEventListener(UNLOAD_DOM_EVENT, this.flushData);
+            window.removeEventListener(VISIBILITYCHANGE_EVENT, this.flushDataIfHidden);
+            window.removeEventListener(PAGEHIDE_EVENT, this.flushData);
+            window.removeEventListener(UNLOAD_DOM_EVENT, this.stopSync);
         }
     };
+    BrowserSignalListener.prototype.stopSync = function () {
+        // Close streaming connection
+        if (this.syncManager && this.syncManager.pushManager)
+            this.syncManager.pushManager.stop();
+    };
     /**
      * flushData method.
      * Called when unload event is triggered. It flushed remaining impressions and events to the backend,
@@ -71,9 +85,10 @@ var BrowserSignalListener = /** @class */ (function () {
             var telemetryCacheAdapter = (0, telemetrySubmitter_1.telemetryCacheStatsAdapter)(this.storage.telemetry, this.storage.splits, this.storage.segments);
             this._flushData(telemetryUrl + '/v1/metrics/usage/beacon', telemetryCacheAdapter, this.serviceApi.postMetricsUsage);
         }
-        // Close streaming connection
-        if (this.syncManager.pushManager)
-            this.syncManager.pushManager.stop();
+    };
+    BrowserSignalListener.prototype.flushDataIfHidden = function () {
+        if (typeof document !== 'undefined' && document.visibilityState === 'hidden')
+            this.flushData(); // On a 'visibilitychange' event, flush data if state is hidden
     };
     BrowserSignalListener.prototype._flushData = function (url, cache, postService, fromCacheToPayload, extraMetadata) {
         // if there is data in cache, send it to backend

package/esm/listeners/browser.js

@@ -5,11 +5,12 @@ import { objectAssign } from '../utils/lang/objectAssign';
 import { CLEANUP_REGISTERING, CLEANUP_DEREGISTERING } from '../logger/constants';
 import { isConsentGranted } from '../consent';
 import { telemetryCacheStatsAdapter } from '../sync/submitters/telemetrySubmitter';
-// 'unload' event is used instead of 'beforeunload', since 'unload' is not a cancelable event, so no other listeners can stop the event from occurring.
+var VISIBILITYCHANGE_EVENT = 'visibilitychange';
+var PAGEHIDE_EVENT = 'pagehide';
 var UNLOAD_DOM_EVENT = 'unload';
 var EVENT_NAME = 'for unload page event.';
 /**
- * We'll listen for 'unload' event over the window object, since it's the standard way to listen page reload and close.
+ * We'll listen for events over the window object.
  */
 var BrowserSignalListener = /** @class */ (function () {
     function BrowserSignalListener(syncManager, settings, storage, serviceApi) {
@@ -18,30 +19,43 @@ var BrowserSignalListener = /** @class */ (function () {
         this.storage = storage;
         this.serviceApi = serviceApi;
         this.flushData = this.flushData.bind(this);
+        this.flushDataIfHidden = this.flushDataIfHidden.bind(this);
+        this.stopSync = this.stopSync.bind(this);
         this.fromImpressionsCollector = fromImpressionsCollector.bind(undefined, settings.core.labelsEnabled);
     }
     /**
      * start method.
-     * Called when SplitFactory is initialized.
-     * We add a handler on unload events. The handler flushes remaining impressions and events to the backend.
+     * Called when SplitFactory is initialized, it adds event listeners to close streaming and flush impressions and events.
      */
     BrowserSignalListener.prototype.start = function () {
         if (typeof window !== 'undefined' && window.addEventListener) {
             this.settings.log.debug(CLEANUP_REGISTERING, [EVENT_NAME]);
-            window.addEventListener(UNLOAD_DOM_EVENT, this.flushData);
+            // Flush data whenever the page is hidden or unloaded.
+            window.addEventListener(VISIBILITYCHANGE_EVENT, this.flushDataIfHidden);
+            // Some browsers like Safari does not fire the `visibilitychange` event when the page is being unloaded. So we also flush data in the `pagehide` event.
+            // If both events are triggered, the last one will find the storage empty, so no duplicated data will be submitted.
+            window.addEventListener(PAGEHIDE_EVENT, this.flushData);
+            // Stop streaming on 'unload' event. Used instead of 'beforeunload', because 'unload' is not a cancelable event, so no other listeners can stop the event from occurring.
+            window.addEventListener(UNLOAD_DOM_EVENT, this.stopSync);
         }
     };
     /**
      * stop method.
-     * Called when client is destroyed.
-     * We need to remove the handler for unload events, since it can break if called when Split context was destroyed.
+     * Called when client is destroyed, it removes event listeners.
      */
     BrowserSignalListener.prototype.stop = function () {
         if (typeof window !== 'undefined' && window.removeEventListener) {
             this.settings.log.debug(CLEANUP_DEREGISTERING, [EVENT_NAME]);
-            window.removeEventListener(UNLOAD_DOM_EVENT, this.flushData);
+            window.removeEventListener(VISIBILITYCHANGE_EVENT, this.flushDataIfHidden);
+            window.removeEventListener(PAGEHIDE_EVENT, this.flushData);
+            window.removeEventListener(UNLOAD_DOM_EVENT, this.stopSync);
         }
     };
+    BrowserSignalListener.prototype.stopSync = function () {
+        // Close streaming connection
+        if (this.syncManager && this.syncManager.pushManager)
+            this.syncManager.pushManager.stop();
+    };
     /**
      * flushData method.
      * Called when unload event is triggered. It flushed remaining impressions and events to the backend,
@@ -68,9 +82,10 @@ var BrowserSignalListener = /** @class */ (function () {
             var telemetryCacheAdapter = telemetryCacheStatsAdapter(this.storage.telemetry, this.storage.splits, this.storage.segments);
             this._flushData(telemetryUrl + '/v1/metrics/usage/beacon', telemetryCacheAdapter, this.serviceApi.postMetricsUsage);
         }
-        // Close streaming connection
-        if (this.syncManager.pushManager)
-            this.syncManager.pushManager.stop();
+    };
+    BrowserSignalListener.prototype.flushDataIfHidden = function () {
+        if (typeof document !== 'undefined' && document.visibilityState === 'hidden')
+            this.flushData(); // On a 'visibilitychange' event, flush data if state is hidden
     };
     BrowserSignalListener.prototype._flushData = function (url, cache, postService, fromCacheToPayload, extraMetadata) {
         // if there is data in cache, send it to backend

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splitsoftware/splitio-commons",
-  "version": "1.4.2-rc.1",
+  "version": "1.4.2-rc.4",
   "description": "Split Javascript SDK common components",
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/src/listeners/browser.ts

@@ -14,12 +14,13 @@ import { ISyncManager } from '../sync/types';
 import { isConsentGranted } from '../consent';
 import { telemetryCacheStatsAdapter } from '../sync/submitters/telemetrySubmitter';
 
-// 'unload' event is used instead of 'beforeunload', since 'unload' is not a cancelable event, so no other listeners can stop the event from occurring.
+const VISIBILITYCHANGE_EVENT = 'visibilitychange';
+const PAGEHIDE_EVENT = 'pagehide';
 const UNLOAD_DOM_EVENT = 'unload';
 const EVENT_NAME = 'for unload page event.';
 
 /**
- * We'll listen for 'unload' event over the window object, since it's the standard way to listen page reload and close.
+ * We'll listen for events over the window object.
  */
 export class BrowserSignalListener implements ISignalListener {
 
@@ -32,33 +33,47 @@ export class BrowserSignalListener implements ISignalListener {
     private serviceApi: ISplitApi,
   ) {
     this.flushData = this.flushData.bind(this);
+    this.flushDataIfHidden = this.flushDataIfHidden.bind(this);
+    this.stopSync = this.stopSync.bind(this);
     this.fromImpressionsCollector = fromImpressionsCollector.bind(undefined, settings.core.labelsEnabled);
   }
 
   /**
    * start method.
-   * Called when SplitFactory is initialized.
-   * We add a handler on unload events. The handler flushes remaining impressions and events to the backend.
+   * Called when SplitFactory is initialized, it adds event listeners to close streaming and flush impressions and events.
    */
   start() {
     if (typeof window !== 'undefined' && window.addEventListener) {
       this.settings.log.debug(CLEANUP_REGISTERING, [EVENT_NAME]);
-      window.addEventListener(UNLOAD_DOM_EVENT, this.flushData);
+
+      // Flush data whenever the page is hidden or unloaded.
+      window.addEventListener(VISIBILITYCHANGE_EVENT, this.flushDataIfHidden);
+      // Some browsers like Safari does not fire the `visibilitychange` event when the page is being unloaded. So we also flush data in the `pagehide` event.
+      // If both events are triggered, the last one will find the storage empty, so no duplicated data will be submitted.
+      window.addEventListener(PAGEHIDE_EVENT, this.flushData);
+      // Stop streaming on 'unload' event. Used instead of 'beforeunload', because 'unload' is not a cancelable event, so no other listeners can stop the event from occurring.
+      window.addEventListener(UNLOAD_DOM_EVENT, this.stopSync);
     }
   }
 
   /**
    * stop method.
-   * Called when client is destroyed.
-   * We need to remove the handler for unload events, since it can break if called when Split context was destroyed.
+   * Called when client is destroyed, it removes event listeners.
    */
   stop() {
     if (typeof window !== 'undefined' && window.removeEventListener) {
       this.settings.log.debug(CLEANUP_DEREGISTERING, [EVENT_NAME]);
-      window.removeEventListener(UNLOAD_DOM_EVENT, this.flushData);
+      window.removeEventListener(VISIBILITYCHANGE_EVENT, this.flushDataIfHidden);
+      window.removeEventListener(PAGEHIDE_EVENT, this.flushData);
+      window.removeEventListener(UNLOAD_DOM_EVENT, this.stopSync);
     }
   }
 
+  stopSync() {
+    // Close streaming connection
+    if (this.syncManager && this.syncManager.pushManager) this.syncManager.pushManager.stop();
+  }
+
   /**
    * flushData method.
    * Called when unload event is triggered. It flushed remaining impressions and events to the backend,
@@ -86,9 +101,10 @@ export class BrowserSignalListener implements ISignalListener {
       const telemetryCacheAdapter = telemetryCacheStatsAdapter(this.storage.telemetry, this.storage.splits, this.storage.segments);
       this._flushData(telemetryUrl + '/v1/metrics/usage/beacon', telemetryCacheAdapter, this.serviceApi.postMetricsUsage);
     }
+  }
 
-    // Close streaming connection
-    if (this.syncManager.pushManager) this.syncManager.pushManager.stop();
+  flushDataIfHidden() {
+    if (typeof document !== 'undefined' && document.visibilityState === 'hidden') this.flushData(); // On a 'visibilitychange' event, flush data if state is hidden
   }
 
   private _flushData<T>(url: string, cache: IRecorderCacheProducerSync<T>, postService: (body: string) => Promise<IResponse>, fromCacheToPayload?: (cacheData: T) => any, extraMetadata?: {}) {

package/types/listeners/browser.d.ts

@@ -4,7 +4,7 @@ import { ISplitApi } from '../services/types';
 import { ISettings } from '../types';
 import { ISyncManager } from '../sync/types';
 /**
- * We'll listen for 'unload' event over the window object, since it's the standard way to listen page reload and close.
+ * We'll listen for events over the window object.
  */
 export declare class BrowserSignalListener implements ISignalListener {
     private syncManager;
@@ -15,22 +15,22 @@ export declare class BrowserSignalListener implements ISignalListener {
     constructor(syncManager: ISyncManager | undefined, settings: ISettings, storage: IStorageSync, serviceApi: ISplitApi);
     /**
      * start method.
-     * Called when SplitFactory is initialized.
-     * We add a handler on unload events. The handler flushes remaining impressions and events to the backend.
+     * Called when SplitFactory is initialized, it adds event listeners to close streaming and flush impressions and events.
      */
     start(): void;
     /**
      * stop method.
-     * Called when client is destroyed.
-     * We need to remove the handler for unload events, since it can break if called when Split context was destroyed.
+     * Called when client is destroyed, it removes event listeners.
      */
     stop(): void;
+    stopSync(): void;
     /**
      * flushData method.
      * Called when unload event is triggered. It flushed remaining impressions and events to the backend,
      * using beacon API if possible, or falling back to regular post transport.
      */
     flushData(): void;
+    flushDataIfHidden(): void;
     private _flushData;
     /**
      * _sendBeacon method.