Merge branch 'notifications-thru-sw' into shigusegubu-vue3

src/components/settings_modal/tabs/notifications_tab.vue

@@ -19,7 +19,7 @@
           </div>
         </li>
         <li>
-          <BooleanSetting path="unseenAtTop">
+          <BooleanSetting path="unseenAtTop" expert="1">
             {{ $t('settings.notification_setting_unseen_at_top') }}
           </BooleanSetting>
         </li>
@@ -38,6 +38,7 @@
         </li>
         <li>
           <h3> {{ $t('settings.notification_visibility') }}</h3>
+          <p v-if="expertLevel > 0">{{ $t('settings.notification_setting_filters_chrome_push') }}</p>
           <ul class="setting-list two-column">
             <li>
               <h4> {{ $t('settings.notification_visibility_mentions') }}</h4>
@@ -233,6 +234,21 @@
           >
             {{ $t('settings.enable_web_push_notifications') }}
           </BooleanSetting>
+          <ul class="setting-list suboptions">
+            <li>
+              <BooleanSetting
+                path="webPushAlwaysShowNotifications"
+                :disabled="!mergedConfig.webPushNotifications"
+              >
+                {{ $t('settings.enable_web_push_always_show') }}
+              </BooleanSetting>
+              <div :class="{ faint: !mergedConfig.webPushNotifications }">
+                <small>
+                  {{ $t('settings.enable_web_push_always_show_tip') }}
+                </small>
+              </div>
+            </li>
+          </ul>
         </li>
         <li>
           <BooleanSetting

src/i18n/en.json

@@ -699,12 +699,15 @@
     "notification_setting_ignore_inactionable_seen_tip": "This will not actually mark those notifications as read, and you'll still get desktop notifications about them if you chose so",
     "notification_setting_unseen_at_top": "Show unread notifications above others",
     "notification_setting_filters": "Filters",
+    "notification_setting_filters_chrome_push": "On some browsers (chrome) it might be impossible to completely filter out notifications by type when they arrive by Push",
     "notification_setting_block_from_strangers": "Block notifications from users who you do not follow",
     "notification_setting_privacy": "Privacy",
     "notification_setting_hide_notification_contents": "Hide the sender and contents of push notifications",
     "notification_mutes": "To stop receiving notifications from a specific user, use a mute.",
     "notification_blocks": "Blocking a user stops all notifications as well as unsubscribes them.",
     "enable_web_push_notifications": "Enable web push notifications",
+    "enable_web_push_always_show": "Always show web push notifications",
+    "enable_web_push_always_show_tip": "Some browsers (Chromium, Chrome) require that push messages always result in a notification, otherwise generic 'Website was updated in background' is shown, enable this to prevent this notification from showing, as Chrome seem to hide push notifications if tab is in focus. Can result in showing duplicate notifications on other browsers.",
     "more_settings": "More settings",
     "style": {
       "switcher": {

src/modules/config.js

@@ -79,6 +79,7 @@ export const defaultState = {
     polls: true
   },
   webPushNotifications: false,
+  webPushAlwaysShowNotifications: false,
   muteWords: [],
   highlight: {},
   interfaceLanguage: browserLocale,

src/sw.js

@@ -29,6 +29,7 @@ const setSettings = async () => {
   const locale = vuexState.config.interfaceLanguage || 'en'
   i18n.locale = locale
   const notificationsNativeArray = Object.entries(vuexState.config.notificationNative)
+  state.webPushAlwaysShowNotifications = vuexState.config.webPushAlwaysShowNotifications
 
   state.allowedNotificationTypes = new Set(
     notificationsNativeArray
@@ -62,7 +63,7 @@ const showPushNotification = async (event) => {
   const activeClients = await getWindowClients()
   await setSettings()
   // Only show push notifications if all tabs/windows are closed
-  if (activeClients.length === 0) {
+  if (state.webPushAlwaysShowNotifications || activeClients.length === 0) {
     const data = event.data.json()
 
     const url = `${self.registration.scope}api/v1/notifications/${data.notification_id}`
@@ -72,7 +73,7 @@ const showPushNotification = async (event) => {
 
     const res = prepareNotificationObject(parsedNotification, i18n)
 
-    if (state.allowedNotificationTypes.has(parsedNotification.type)) {
+    if (state.webPushAlwaysShowNotifications || state.allowedNotificationTypes.has(parsedNotification.type)) {
       return self.registration.showNotification(res.title, res)
     }
   }