From 75458a34104f4a7b916e6ac2c3b2c9df10bc975c Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Fri, 19 Mar 2021 08:00:59 -0700
Subject: [PATCH] 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
---
 .../_store/computations/badgeComputations.js  |  5 +++++
 src/routes/_store/observers/badgeObservers.js | 19 +++++++++++++++++++
 .../_store/observers/loggedInObservers.js     |  2 ++
 src/routes/_utils/userAgent/isChromePre87.js  |  5 +++++
 4 files changed, 31 insertions(+)
 create mode 100644 src/routes/_store/observers/badgeObservers.js
 create mode 100644 src/routes/_utils/userAgent/isChromePre87.js

diff --git a/src/routes/_store/computations/badgeComputations.js b/src/routes/_store/computations/badgeComputations.js
index 8203c455..ca78f906 100644
--- a/src/routes/_store/computations/badgeComputations.js
+++ b/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)
+  )
 }
diff --git a/src/routes/_store/observers/badgeObservers.js b/src/routes/_store/observers/badgeObservers.js
new file mode 100644
index 00000000..991e420c
--- /dev/null
+++ b/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()
+    }
+  })
+}
diff --git a/src/routes/_store/observers/loggedInObservers.js b/src/routes/_store/observers/loggedInObservers.js
index cc427519..ec2232bc 100644
--- a/src/routes/_store/observers/loggedInObservers.js
+++ b/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()
 }
diff --git a/src/routes/_utils/userAgent/isChromePre87.js b/src/routes/_utils/userAgent/isChromePre87.js
new file mode 100644
index 00000000..50a15909
--- /dev/null
+++ b/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'))