feat: support web worker env (#467)

Author: kevinpagtakhan

Makefile

@@ -35,6 +35,7 @@ clean:
 
 test: build
 	@$(KARMA) start karma.conf.js
+	@$(KARMA) start karma-web-worker.conf.js
 
 test-sauce: build
 	@$(KARMA) start karma.conf.js --browsers sauce_chrome_windows

karma-web-worker.conf.js

@@ -0,0 +1,36 @@
+module.exports = config => {
+  config.set({
+    frameworks: ['mocha-webworker'],
+    files: [
+      {
+        pattern: 'test/web-worker.js',
+        included: false,
+      },
+      {
+        pattern: 'amplitude.js',
+        included: false,
+      },
+      {
+        pattern: 'node_modules/sinon/pkg/sinon.js',
+        included: false,
+      },
+    ],
+    browsers: ['ChromeHeadless'],
+    autoWatch: false,
+    singleRun: true,
+    reporters: ['mocha'],
+    client: {
+      mochaWebWorker: {
+        pattern: [
+          'test/web-worker.js',
+          'amplitude.js',
+          'node_modules/sinon/pkg/sinon.js'
+        ],
+        worker: 'Worker',
+        mocha: {
+          ui: 'bdd'
+        }
+      }
+    }
+  });
+};

package.json

@@ -48,6 +48,7 @@
     "karma-firefox-launcher": "^1.0.1",
     "karma-mocha": "^1.3.0",
     "karma-mocha-reporter": "^2.2.5",
+    "karma-mocha-webworker": "^1.3.0",
     "karma-sauce-launcher": "^2.0.2",
     "karma-sinon": "^1.0.5",
     "karma-sourcemap-loader": "^0.3.7",

src/amplitude-client.js

@@ -19,6 +19,7 @@ import getHost from './get-host';
 import baseCookie from './base-cookie';
 import { AmplitudeServerZone, getEventLogApi } from './server-zone';
 import ConfigManager from './config-manager';
+import GlobalScope from './global-scope';
 
 /**
  * AmplitudeClient SDK API - instance constructor.
@@ -28,7 +29,7 @@ import ConfigManager from './config-manager';
  * @example var amplitudeClient = new AmplitudeClient();
  */
 var AmplitudeClient = function AmplitudeClient(instanceName) {
-  if (!isBrowserEnv()) {
+  if (!isBrowserEnv() && !utils.isWebWorkerEnvironment()) {
     utils.log.warn(
       'amplitude-js will not work in a non-browser environment. If you are planning to add Amplitude to a node environment, please use @amplitude/node',
     );
@@ -80,7 +81,11 @@ AmplitudeClient.prototype.init = function init(apiKey, opt_userId, opt_config, o
 
   try {
     _parseConfig(this.options, opt_config);
-    if (isBrowserEnv() && window.Prototype !== undefined && Array.prototype.toJSON) {
+    if (
+      (isBrowserEnv() || utils.isWebWorkerEnvironment()) &&
+      GlobalScope.Prototype !== undefined &&
+      Array.prototype.toJSON
+    ) {
       prototypeJsFix();
       utils.log.warn(
         'Prototype.js injected Array.prototype.toJSON. Deleting Array.prototype.toJSON to prevent double-stringify',
@@ -243,7 +248,7 @@ AmplitudeClient.prototype.init = function init(apiKey, opt_userId, opt_config, o
         // Monitoring just page exits because that is the most requested feature for now
         // "If you're specifically trying to detect page unload events, the pagehide event is the best option."
         // https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event
-        window.addEventListener(
+        GlobalScope.addEventListener(
           'pagehide',
           () => {
             handleVisibilityChange();
@@ -254,7 +259,7 @@ AmplitudeClient.prototype.init = function init(apiKey, opt_userId, opt_config, o
     }
   } catch (err) {
     utils.log.error(err);
-    if (type(opt_config.onError) === 'function') {
+    if (opt_config && type(opt_config.onError) === 'function') {
       opt_config.onError(err);
     }
   }
@@ -272,7 +277,7 @@ AmplitudeClient.prototype.deleteLowerLevelDomainCookies = function () {
   const cookieHost =
     this.options.domain && this.options.domain[0] === '.' ? this.options.domain.slice(1) : this.options.domain;
 
-  if (!cookieHost) {
+  if (!cookieHost || !utils.isWebWorkerEnvironment()) {
     return;
   }
 
@@ -751,14 +756,14 @@ var _sendParamsReferrerUserProperties = function _sendParamsReferrerUserProperti
  * @private
  */
 AmplitudeClient.prototype._getReferrer = function _getReferrer() {
-  return document.referrer;
+  return typeof document !== 'undefined' ? document.referrer : '';
 };
 
 /**
  * @private
  */
 AmplitudeClient.prototype._getUrlParams = function _getUrlParams() {
-  return location.search;
+  return GlobalScope.location.search;
 };
 
 /**
@@ -1780,7 +1785,7 @@ AmplitudeClient.prototype.sendEvents = function sendEvents() {
     }
     this._sending = true;
   }
-  var protocol = this.options.forceHttps ? 'https' : 'https:' === window.location.protocol ? 'https' : 'http';
+  var protocol = this.options.forceHttps ? 'https' : 'https:' === GlobalScope.location.protocol ? 'https' : 'http';
   var url = protocol + '://' + this.options.apiEndpoint;
 
   // fetch events to send

src/base-cookie.js

@@ -95,6 +95,9 @@ const sortByEventTime = (cookies) => {
 // test that cookies are enabled - navigator.cookiesEnabled yields false positives in IE, need to test directly
 const areCookiesEnabled = (opts = {}) => {
   const cookieName = Constants.COOKIE_TEST_PREFIX + base64Id();
+  if (typeof document === 'undefined') {
+    return false;
+  }
   let _areCookiesEnabled = false;
   try {
     const uid = String(new Date());

src/base64.js

@@ -1,4 +1,5 @@
 import UTF8 from './utf8';
+import GlobalScope from './global-scope';
 
 /*
  * Base64 encoder/decoder
@@ -9,8 +10,8 @@ var Base64 = {
 
   encode: function (input) {
     try {
-      if (window.btoa && window.atob) {
-        return window.btoa(unescape(encodeURIComponent(input)));
+      if (GlobalScope.btoa && GlobalScope.atob) {
+        return GlobalScope.btoa(unescape(encodeURIComponent(input)));
       }
     } catch (e) {
       //log(e);
@@ -53,8 +54,8 @@ var Base64 = {
 
   decode: function (input) {
     try {
-      if (window.btoa && window.atob) {
-        return decodeURIComponent(escape(window.atob(input)));
+      if (GlobalScope.btoa && GlobalScope.atob) {
+        return decodeURIComponent(escape(GlobalScope.atob(input)));
       }
     } catch (e) {
       //log(e);

src/config-manager.js

@@ -1,5 +1,6 @@
 import Constants from './constants';
 import { getDynamicConfigApi } from './server-zone';
+import GlobalScope from './global-scope';
 /**
  * Dynamic Configuration
  * Find the best server url automatically based on app users' geo location.
@@ -15,14 +16,14 @@ class ConfigManager {
 
   refresh(serverZone, forceHttps, callback) {
     let protocol = 'https';
-    if (!forceHttps && 'https:' !== window.location.protocol) {
+    if (!forceHttps && 'https:' !== GlobalScope.location.protocol) {
       protocol = 'http';
     }
     const dynamicConfigUrl = protocol + '://' + getDynamicConfigApi(serverZone);
     const self = this;
-    const isIE = window.XDomainRequest ? true : false;
+    const isIE = GlobalScope.XDomainRequest ? true : false;
     if (isIE) {
-      const xdr = new window.XDomainRequest();
+      const xdr = new GlobalScope.XDomainRequest();
       xdr.open('GET', dynamicConfigUrl, true);
       xdr.onload = function () {
         const response = JSON.parse(xdr.responseText);

src/cookiestorage.js

@@ -6,6 +6,7 @@
 import Cookie from './cookie';
 import localStorage from './localstorage';
 import baseCookie from './base-cookie';
+import GlobalScope from './global-scope';
 
 var cookieStorage = function () {
   this.storage = null;
@@ -43,7 +44,7 @@ cookieStorage.prototype.getStorage = function () {
         this._options.expirationDays = opts.expirationDays || this._options.expirationDays;
         // localStorage is specific to subdomains
         this._options.domain =
-          opts.domain || this._options.domain || (window && window.location && window.location.hostname);
+          opts.domain || this._options.domain || (GlobalScope && GlobalScope.location && GlobalScope.location.hostname);
         return (this._options.secure = opts.secure || false);
       },
       get: function (name) {

src/get-host.js

@@ -1,7 +1,18 @@
+import GlobalScope from './global-scope';
+
 const getHost = (url) => {
-  const a = document.createElement('a');
-  a.href = url;
-  return a.hostname || location.hostname;
+  if (url) {
+    if (typeof document !== 'undefined') {
+      const a = document.createElement('a');
+      a.href = url;
+      return a.hostname || GlobalScope.location.hostname;
+    }
+    if (typeof URL === 'function') {
+      const u = new URL(url);
+      return u.hostname || GlobalScope.location.hostname;
+    }
+  }
+  return GlobalScope.location.hostname;
 };
 
 export default getHost;

src/get-location.js

@@ -1,5 +1,7 @@
+import GlobalScope from './global-scope';
+
 const getLocation = () => {
-  return window.location;
+  return GlobalScope.location;
 };
 
 export default getLocation;