redash/client/app/services/notifications.js

import { find } from "lodash";
import debug from "debug";
import recordEvent from "@/services/recordEvent";

const logger = debug("redash:notifications");

const Notification = window.Notification || null;
if (!Notification) {
  logger("HTML5 notifications are not supported.");
}

const hidden = find(["hidden", "webkitHidden", "mozHidden", "msHidden"], prop => prop in document);

class NotificationsService {
  // eslint-disable-next-line class-methods-use-this
  get pageVisible() {
    return !document[hidden];
  }

  // eslint-disable-next-line class-methods-use-this
  getPermissions() {
    if (Notification && Notification.permission === "default") {
      Notification.requestPermission(status => {
        if (Notification.permission !== status) {
          Notification.permission = status;
        }
      });
    }
  }

  showNotification(title, content) {
    if (!Notification || this.pageVisible || Notification.permission !== "granted") {
      return;
    }

    // using the 'tag' to avoid showing duplicate notifications
    const notification = new Notification(title, {
      tag: title + content,
      body: content,
      icon: "/images/redash_icon_small.png",
    });
    setTimeout(() => {
      notification.close();
    }, 3000);
    notification.onclick = function onClick() {
      window.focus();
      this.close();
      recordEvent("click", "notification");
    };
  }
}

export default new NotificationsService();