feat: registerPushNotifications (#812)

* feat: registerPushNotifications * chore: auto-fix linting and formatting issues * feat: post message token * feat: newEntryNotification action * feat: handle notification click event
RSSNext · Oct 9, 2024 · baab5b9 · baab5b9
1 parent 68e6509
commit baab5b9
Show file tree

Hide file tree

Showing 10 changed files with 428 additions and 3 deletions.
diff --git a/apps/main/package.json b/apps/main/package.json
@@ -25,6 +25,7 @@
     "@egoist/tipc": "0.3.2",
     "@electron-toolkit/preload": "^3.0.1",
     "@electron-toolkit/utils": "^3.0.0",
+    "@eneris/push-receiver": "4.2.0",
     "@follow/shared": "workspace:*",
     "@mozilla/readability": "^0.5.0",
     "@sentry/electron": "5.4.0",

diff --git a/apps/main/src/init.ts b/apps/main/src/init.ts
@@ -1,16 +1,22 @@
 import path from "node:path"
 
-import { registerIpcMain } from "@egoist/tipc/main"
+import { getRendererHandlers, registerIpcMain } from "@egoist/tipc/main"
+import { PushReceiver } from "@eneris/push-receiver"
 import { APP_PROTOCOL } from "@follow/shared/constants"
-import { app, nativeTheme, shell } from "electron"
+import { env } from "@follow/shared/env"
+import type { MessagingData } from "@follow/shared/hono"
+import { app, nativeTheme, Notification, shell } from "electron"
 import contextMenu from "electron-context-menu"
 
 import { getIconPath } from "./helper"
+import { apiClient } from "./lib/api-client"
 import { t } from "./lib/i18n"
 import { store } from "./lib/store"
 import { registerAppMenu } from "./menu"
+import type { RendererHandlers } from "./renderer-handlers"
 import { initializeSentry } from "./sentry"
 import { router } from "./tipc"
+import { createMainWindow, getMainWindow } from "./window"
 
 const appFolder = {
   prod: "Follow",
@@ -55,6 +61,8 @@ export const initializeAppStage1 = () => {
   // code. You can also put them in separate files and require them here.
 
   registerMenuAndContextMenu()
+
+  registerPushNotifications()
 }
 
 let contextMenuDisposer: () => void
@@ -115,3 +123,74 @@ export const registerMenuAndContextMenu = () => {
     },
   })
 }
+
+const registerPushNotifications = async () => {
+  if (!env.VITE_FIREBASE_CONFIG) {
+    return
+  }
+
+  const credentialsKey = "notifications-credentials"
+  const persistentIdsKey = "notifications-persistent-ids"
+  const credentials = store.get(credentialsKey)
+  const persistentIds = store.get(persistentIdsKey)
+
+  if (credentials) {
+    apiClient.messaging.$post({
+      json: {
+        token: credentials.fcm.token,
+        channel: "desktop",
+      },
+    })
+  }
+
+  const instance = new PushReceiver({
+    debug: isDev,
+    firebase: env.VITE_FIREBASE_CONFIG,
+    persistentIds: persistentIds || [],
+    credentials,
+  })
+
+  instance.onCredentialsChanged(({ newCredentials }) => {
+    store.set(credentialsKey, newCredentials)
+    apiClient.messaging.$post({
+      json: {
+        token: newCredentials.fcm.token,
+        channel: "desktop",
+      },
+    })
+  })
+
+  instance.onNotification((notification) => {
+    const data = notification.message.data as MessagingData
+    switch (data.type) {
+      case "new-entry": {
+        const notification = new Notification({
+          title: data.title,
+          body: data.description,
+        })
+        notification.on("click", () => {
+          let mainWindow = getMainWindow()
+          if (!mainWindow) {
+            mainWindow = createMainWindow()
+          }
+          mainWindow.restore()
+          mainWindow.focus()
+          const handlers = getRendererHandlers<RendererHandlers>(mainWindow.webContents)
+          handlers.navigateEntry.send({
+            feedId: data.feedId,
+            entryId: data.entryId,
+            view: Number.parseInt(data.view),
+          })
+        })
+        notification.show()
+        break
+      }
+      default: {
+        break
+      }
+    }
+    store.set(persistentIdsKey, instance.persistentIds)
+  })
+
+  await instance.connect()
+}
diff --git a/apps/main/src/renderer-handlers.ts b/apps/main/src/renderer-handlers.ts
@@ -1,4 +1,5 @@
 export type RendererHandlers = {
   invalidateQuery: (key: (string | number | undefined)[]) => void
   updateDownloaded: () => void
+  navigateEntry: (options: { feedId: string; entryId: string; view: number }) => void
 }
diff --git a/apps/renderer/src/App.tsx b/apps/renderer/src/App.tsx
@@ -6,6 +6,7 @@ import { queryClient } from "~/lib/query-client"
 
 import { useAppIsReady } from "./atoms/app"
 import { useUISettingKey } from "./atoms/settings/ui"
+import { navigateEntry } from "./hooks/biz/useNavigateEntry"
 import { applyAfterReadyCallbacks } from "./initialize/queue"
 import { appLog } from "./lib/log"
 import { cn, getOS } from "./lib/utils"
@@ -21,6 +22,10 @@ function App() {
       })
     })
 
+    handlers?.navigateEntry.listen((options) => {
+      navigateEntry(options)
+    })
+
     return cleanup
   }, [])
 

diff --git a/apps/renderer/src/models/types.ts b/apps/renderer/src/models/types.ts
@@ -101,6 +101,7 @@ export type ActionsInput = {
     summary?: boolean
     readability?: boolean
     silence?: boolean
+    newEntryNotification?: boolean
     rewriteRules?: {
       from: string
       to: string

diff --git a/apps/renderer/src/modules/settings/action-card.tsx b/apps/renderer/src/modules/settings/action-card.tsx
@@ -452,6 +452,20 @@ export function ActionCard({
                 </div>
                 <Divider />
 
+                <div className="flex w-full items-center justify-between">
+                  <span className="w-0 shrink grow truncate">
+                    {t("actions.action_card.new_entry_notification")}
+                  </span>
+                  <Switch
+                    checked={data.result.newEntryNotification}
+                    onCheckedChange={(checked) => {
+                      data.result.newEntryNotification = checked
+                      onChange(data)
+                    }}
+                  />
+                </div>
+                <Divider />
+
                 <div className="flex w-full items-center justify-between">
                   <span className="w-0 shrink grow truncate">
                     {t("actions.action_card.silence")}

diff --git a/locales/settings/en.json b/locales/settings/en.json
@@ -26,6 +26,7 @@
   "actions.action_card.from": "From",
   "actions.action_card.generate_summary": "Generate summary using AI",
   "actions.action_card.name": "Name",
+  "actions.action_card.new_entry_notification": "Notification of new entry",
   "actions.action_card.no_translation": "No translation",
   "actions.action_card.operation_options.contains": "contains",
   "actions.action_card.operation_options.does_not_contain": "does not contain",

diff --git a/packages/shared/src/env.ts b/packages/shared/src/env.ts
@@ -11,6 +11,27 @@ export const env = createEnv({
     VITE_SENTRY_DSN: z.string().optional(),
     VITE_POSTHOG_KEY: z.string().optional(),
     VITE_INBOXES_EMAIL: z.string().default("@follow.re"),
+    VITE_FIREBASE_CONFIG: z
+      .string()
+      .transform((content) => {
+        try {
+          return JSON.parse(content)
+        } catch {
+          return z.NEVER
+        }
+      })
+      .pipe(
+        z.object({
+          apiKey: z.string(),
+          authDomain: z.string(),
+          projectId: z.string(),
+          storageBucket: z.string(),
+          messagingSenderId: z.string(),
+          appId: z.string(),
+          measurementId: z.string(),
+        }),
+      )
+      .optional(),
   },
 
   emptyStringAsUndefined: true,