feat: use web badge API to show notifications/follow requests (#2005)

* feat: use web badge API to show notifications/follow requests

Fixes #1900

* fix: change detection logic

* fix: add UA check

* fix: tweak

src/routes/_store/computations/badgeComputations.js

@@ -25,4 +25,9 @@ export function badgeComputations (store) {
     ['numberOfFollowRequests'],
     (numberOfFollowRequests) => !!numberOfFollowRequests
   )
+
+  store.compute('badgeNumber',
+    ['numberOfFollowRequests', 'numberOfNotifications'],
+    (numberOfFollowRequests, numberOfNotifications) => (numberOfFollowRequests + numberOfNotifications)
+  )
 }

src/routes/_store/observers/badgeObservers.js

@@ -0,0 +1,19 @@
+import { store } from '../store'
+import { isChromePre87 } from '../../_utils/userAgent/isChromePre87'
+
+export function badgeObservers () {
+  if (!process.browser) {
+    return
+  }
+  // Chrome 86 on Linux in Circle CI seems to hang just by checking for this... not worth supporting.
+  if (isChromePre87() || !('setAppBadge' in navigator)) {
+    return
+  }
+  store.observe('badgeNumber', badgeNumber => {
+    if (badgeNumber) {
+      navigator.setAppBadge(badgeNumber)
+    } else {
+      navigator.clearAppBadge()
+    }
+  })
+}

src/routes/_store/observers/loggedInObservers.js

@@ -8,6 +8,7 @@ import { customEmojiObservers } from './customEmojiObservers'
 import { cleanup } from './cleanup'
 import { wordFilterObservers } from './wordFilterObservers'
 import { showShareDialogObservers } from './showShareDialogObservers'
+import { badgeObservers } from './badgeObservers'
 
 // These observers can be lazy-loaded when the user is actually logged in.
 // Prevents circular dependencies and reduces the size of main.js
@@ -21,5 +22,6 @@ export function loggedInObservers () {
   customScrollbarObservers()
   customEmojiObservers()
   showShareDialogObservers()
+  badgeObservers()
   cleanup()
 }

src/routes/_utils/userAgent/isChromePre87.js

@@ -0,0 +1,5 @@
+import { isChrome } from './isChrome'
+import { thunk } from '../thunk'
+
+// https://caniuse.com/cookie-store-api
+export const isChromePre87 = thunk(() => (process.browser && isChrome() && typeof cookieStore === 'undefined'))