Improve visibility awareness for Browser Notifications on web/desktop

main.js

@@ -1,4 +1,9 @@
-const {app, BrowserWindow, shell} = require('electron');
+const {
+    app,
+    BrowserWindow,
+    shell,
+    ipcMain
+} = require('electron');
 const serve = require('electron-serve');
 const contextMenu = require('electron-context-menu');
 const {autoUpdater} = require('electron-updater');
@@ -57,6 +62,12 @@ const mainWindow = (() => {
                 return shell.openExternal(url);
             });
 
+            ipcMain.on('request-visibility', (event) => {
+                // This is how synchronous messages work in Electron
+                // eslint-disable-next-line no-param-reassign
+                event.returnValue = browserWindow.isFocused();
+            });
+
             return browserWindow;
         })
 

src/lib/Visibility/index.js

@@ -0,0 +1,22 @@
+// We conditionally import the ipcRenderer here so that we can
+// communicate with the main Electron process in main.js
+const ipcRenderer = window.require ? window.require('electron').ipcRenderer : null;
+
+/**
+ * Detects whether the app is visible or not. Electron supports
+ * document.visibilityState, but switching to another app while
+ * Electron is partially occluded will not trigger a state of hidden
+ * so we ask the main process synchronously whether the
+ * BrowserWindow.isFocused()
+ *
+ * @returns {Boolean}
+ */
+function isVisible() {
+    return ipcRenderer
+        ? ipcRenderer.sendSync('request-visibility')
+        : document.visibilityState === 'visible';
+}
+
+export default {
+    isVisible,
+};

src/lib/Visibility/index.native.js

@@ -0,0 +1,11 @@
+// Mobile apps do not require this check for visibility as
+// they do not use the Notification lib.
+
+/**
+ * @return {Boolean}
+ */
+const isVisible = () => true;
+
+export default {
+    isVisible,
+};

src/lib/actions/Report.js

@@ -11,6 +11,7 @@ import ExpensiMark from '../ExpensiMark';
 import Notification from '../Notification';
 import * as PersonalDetails from './PersonalDetails';
 import {redirect} from './App';
+import Visibility from '../Visibility';
 
 let currentUserEmail;
 let currentUserAccountID;
@@ -200,7 +201,7 @@ function updateReportWithNewAction(reportID, reportAction) {
     const currentReportID = Number(lodashGet(currentURL.split('/'), [1], 0));
 
     // If we are currently viewing this report do not show a notification.
-    if (reportID === currentReportID) {
+    if (reportID === currentReportID && Visibility.isVisible()) {
         console.debug('[NOTIFICATION] No notification because it was a comment for the current report');
         return;
     }