wcomponent-check-connexion/dist-web/index.js

web component that is used to check user connexion

import { LitElement, css, html } from 'lit-element/lit-element';

function _taggedTemplateLiteral(strings, raw) {
  if (!raw) {
    raw = strings.slice(0);
  }

  return Object.freeze(Object.defineProperties(strings, {
    raw: {
      value: Object.freeze(raw)
    }
  }));
}

function _templateObject2() {
  const data = _taggedTemplateLiteral(["\n            <div class=\"connexion ", "\">\n                <div class=\"isDisconnected\">", "</div>\n            </div>\n        "]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  const data = _taggedTemplateLiteral(["       \n            .connexion {\n                --check-connexion-font-size: 2vh;\n                --check-connexion-background-color: #d00000;\n                --check-connexion-text-color: #ffffff;\n                --check-connexion-text-transform: uppercase;\n                --check-connexion-height: 50px;\n            } \n            \n            .connexion {\n                height: 0;\n                opacity: 0;\n                position: fixed;\n                line-height: var(--check-connexion-height);\n                bottom: 0;\n                width: 100%;\n                background-color: var(--check-connexion-background-color);\n                color: var(--check-connexion-text-color);\n                text-align: center;\n                padding: 5px;\n                transition: 1s all ease-in-out;\n                overflow: hidden;\n            }\n            .active {\n                height: var(--check-connexion-height);\n                opacity: 1;\n            }\n            .isDisconnected {\n                font-size: var(--check-connexion-font-size);\n                text-transform: var(--check-connexion-text-transform)\n            }\n        "]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
class CheckConnexion extends LitElement {
  constructor() {
    super();
    this.tStart = null;
    this.tEnd = null;
    this.image = new Image();
    this.counter = 0;
    this.arrTimes = [];
    this.abortFallback = false;
    this.timeToCount = 3;
    this.threshold = 2000;
    this.offlineTimeout = 2000;
    this.message = "Disconnected";

    this.timeout = () => {};

    this.intervalCheckLatency = 6000;
    this.state = true;
  }

  static get properties() {
    return {
      timeToCount: {
        type: Number
      },
      threshold: {
        type: Number
      },
      offlineTimeout: {
        type: Number
      },
      message: {
        type: Text
      },
      intervalCheckLatency: {
        type: Number
      },
      active: {
        type: Boolean
      }
    };
  }
  /**
   * init the function which observe if user have connexion
   * @param _changeProperty
   */


  firstUpdated(_changeProperty) {
    this.checkConnectivity();
  }
  /**
   *
   * @param {boolean} state of the connexion
   */


  changeConnectivity(state) {
    //fire the event connexion-changed in document
    const event = new CustomEvent('connexion-changed', {
      detail: state
    });
    document.dispatchEvent(event);
    this.changeState(state); //display the div to inform user that they didn't havec connexion

    if (state) {
      clearTimeout(this.timeout);
    }
  }

  changeState(state) {
    if (state !== this.state) {
      this.state = !this.state;
      this.requestUpdate();
    }
  }
  /**
   * function used to check the connexion of users
   */


  checkConnectivity() {
    //users have connexion when they load the page ?
    if (navigator.onLine) {
      this.changeConnectivity(true);
    } else {
      this.timeout = setTimeout(() => {
        this.changeConnectivity(false);
      }, this.offlineTimeout);
    } //event listener online / offline


    window.addEventListener('online', () => {
      this.changeConnectivity(true);
    });
    window.addEventListener('offline', () => {
      this.timeout = setTimeout(() => {
        this.changeConnectivity(false);
      }, this.offlineTimeout);
    }); //timeout in case of the connexion is too slow to load the first request

    this.timeoutCallback(); //check if the connexion is too slow

    this.checkLatency(avg => this.handleLatency(avg));
    setInterval(() => {
      this.reset();
      this.timeoutCallback();
      this.checkLatency(avg => this.handleLatency(avg));
    }, this.intervalCheckLatency);
  }
  /**
   * make an average of time to get an image
   * @param {function} callback
   */


  checkLatency(callback) {
    this.tStart = new Date().getTime();

    if (this.counter < this.timeToCount) {
      //load image use to check the connexion
      this.image.src = "https://www.google.com/images/phd/px.gif?t=" + this.tStart;

      this.image.onload = () => {
        //disabling the fallback timeout
        this.abortFallback = true; //add the time to get the image to an array to make the average

        this.tEnd = new Date().getTime();
        let time = this.tEnd - this.tStart;
        this.arrTimes.push(time);
        this.checkLatency(callback);
        this.counter++;
      }; //if we can't get the image, passing the connectivity to false


      this.image.offline = () => {
        this.timeout = setTimeout(() => {
          this.changeConnectivity(false);
        }, this.offlineTimeout);
      };
    } else {
      //average of times to get images
      const sum = this.arrTimes.reduce((a, b) => a + b);
      const avg = sum / this.arrTimes.length;
      callback(avg);
    }
  }

  timeoutCallback() {
    this.timeout = setTimeout(() => {
      if (!this.abortFallback) {
        console.log('Connectivity is too slow, falling back offline experience');
        this.changeConnectivity(false);
      }
    }, this.threshold + 1);
  }

  reset() {
    this.arrTimes = [];
    this.counter = 0;
  }

  handleLatency(avg) {
    const isConnectedFast = avg <= this.threshold;
    if (!isConnectedFast) return this.changeConnectivity(false);
    this.changeConnectivity(true);
  }

  static get styles() {
    return css(_templateObject());
  }

  render() {
    let classInactive = !this.state ? 'active' : '';
    return html(_templateObject2(), classInactive, this.message);
  }

}
customElements.define('check-connexion', CheckConnexion);

export default CheckConnexion;