Fix: Adds favicon badge for notification alert. (#2079)

* Adds favicon badge for notification alert.

app/javascript/packs/application.js

@@ -21,6 +21,7 @@ import i18n from '../dashboard/i18n';
 import createAxios from '../dashboard/helper/APIHelper';
 import commonHelpers from '../dashboard/helper/commons';
 import { getAlertAudio } from '../shared/helpers/AudioNotificationHelper';
+import { initFaviconSwitcher } from '../shared/helpers/faviconHelper';
 import router from '../dashboard/routes';
 import store from '../dashboard/store';
 import vueActionCable from '../dashboard/helper/actionCable';
@@ -80,4 +81,5 @@ window.addEventListener('load', () => {
     })
   );
   getAlertAudio();
+  initFaviconSwitcher();
 });

app/javascript/shared/helpers/AudioNotificationHelper.js

@@ -1,6 +1,7 @@
 import { MESSAGE_TYPE } from 'shared/constants/messages';
 const notificationAudio = require('shared/assets/audio/ding.mp3');
 import axios from 'axios';
+import { showBadgeOnFavicon } from './faviconHelper';
 
 export const playNotificationAudio = () => {
   try {
@@ -74,5 +75,6 @@ export const newMessageNotification = data => {
 
   if (enableAudioAlerts && playAudio) {
     window.playAudioAlert();
+    showBadgeOnFavicon();
   }
 };

app/javascript/shared/helpers/faviconHelper.js

@@ -0,0 +1,21 @@
+export const showBadgeOnFavicon = () => {
+  const favicons = document.querySelectorAll('.favicon');
+
+  favicons.forEach(favicon => {
+    const newFileName = `/favicon-badge-${favicon.sizes[[0]]}.png`;
+    favicon.href = newFileName;
+  });
+};
+
+export const initFaviconSwitcher = () => {
+  const favicons = document.querySelectorAll('.favicon');
+
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') {
+      favicons.forEach(favicon => {
+        const oldFileName = `/favicon-${favicon.sizes[[0]]}.png`;
+        favicon.href = oldFileName;
+      });
+    }
+  });
+};

app/views/layouts/vueapp.html.erb

@@ -23,9 +23,9 @@
       <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
       <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
       <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
-      <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+      <link class="favicon" rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-      <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
+      <link class="favicon" rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
-      <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+      <link class="favicon" rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
       <link rel="manifest" href="/manifest.json">
     <% end %>
     <link rel="icon" type="image/png" sizes="512x512" href="<%= @global_config['LOGO_THUMBNAIL'] %>">