new build notifier - component - medium

new-build-notifier.js

import Component from '@ember/component';
import layout from '../templates/components/new-build-notifier';
import { MDCSnackbar } from '@material/snackbar';
import { inject as service } from '@ember/service';
import { set } from '@ember/object';
import { task, timeout } from 'ember-concurrency';
import config from 'ember-get-config';
import { isEmpty } from '@ember/utils';

export default Component.extend({
  layout,
  intl: service(),

  init() {
    this._super(...arguments);
    set(this, 'pollingInterval', config.APP.newBuildPollingInterval);
  },

  /**
   * Delay attaching the updateHandler to prevent users from
   * seeing a new build notification immediately on page load.
   */
  setupTask: task(function*() {
    const env = config.environment;
    const serviceWorkerEnabled = ['staging', 'production'].indexOf(env) !== -1;
    const hasServiceWorker = 'serviceWorker' in navigator;
    const supportsPromises = 'Promise' in window;
    if (serviceWorkerEnabled && hasServiceWorker && supportsPromises) {
      yield timeout(this.pollingInterval);
      this._attachUpdateHandler();

      const polling = this.pollingTask.perform();
      set(this, 'polling', polling);
    }
  }).on('didInsertElement'),

  pollingTask: task(function*() {
    while (true) {
      yield navigator.serviceWorker.register('/sw.js', {
        scope: '/'
      }).then((reg) => {
        reg.update();
      });

      yield timeout(this.pollingInterval);
    }
  }),

  _attachUpdateHandler() {
    window.isUpdateAvailable.then(() => {
      if (!isEmpty(this.polling)) {
        this.polling.cancel();
      }

      const intl = this.intl;
      const element = this.element.querySelector('.mdc-snackbar');
      const snackbar = new MDCSnackbar(element);
      const data = {
        message: intl.t('components.new-build-notifier.text'),
        actionText: intl.t('components.new-build-notifier.action'),
        // setTimeout uses 32 bit int
        // so Number.MAX_SAFE_INTEGER would not work
        timeout: 2147483647,
        actionHandler: function () {
          window.location.reload(true);
        }
      };

      snackbar.show(data);
    });
  }
});