feat: web push

Signed-off-by: Innei <[email protected]>

Author: Innei

apps/renderer/package.json

@@ -109,6 +109,7 @@
     "use-sync-external-store": "1.2.2",
     "usehooks-ts": "3.1.0",
     "vfile": "6.0.3",
+    "web-push": "3.6.7",
     "zod": "3.23.8",
     "zustand": "5.0.1"
   },

apps/renderer/src/main.tsx

@@ -10,12 +10,19 @@ import ReactDOM from "react-dom/client"
 import { RouterProvider } from "react-router/dom"
 
 import { setAppIsReady } from "./atoms/app"
-import { ElECTRON_CUSTOM_TITLEBAR_HEIGHT } from "./constants"
+import { ElECTRON_CUSTOM_TITLEBAR_HEIGHT, isWebBuild } from "./constants"
 import { initializeApp } from "./initialize"
 import { registerAppGlobalShortcuts } from "./initialize/global-shortcuts"
+import { registerWebPushNotifications } from "./push-notification"
 import { router } from "./router"
 
 initializeApp().finally(() => {
+  import("./push-notification").then(({ registerWebPushNotifications }) => {
+    registerWebPushNotifications()
+  })
+  if (navigator.serviceWorker && isWebBuild) {
+    registerWebPushNotifications()
+  }
   setAppIsReady(true)
 })
 

apps/renderer/src/push-notification.ts

@@ -0,0 +1,83 @@
+import { env } from "@follow/shared/env"
+import { initializeApp } from "firebase/app"
+import { getMessaging, getToken } from "firebase/messaging"
+
+import { apiClient } from "./lib/api-fetch"
+import { router } from "./router"
+
+const firebaseConfig = env.VITE_FIREBASE_CONFIG ? JSON.parse(env.VITE_FIREBASE_CONFIG) : null
+
+export async function registerWebPushNotifications() {
+  if (!firebaseConfig) {
+    return
+  }
+  try {
+    const existingRegistration = await navigator.serviceWorker.getRegistration()
+    let registration = existingRegistration
+
+    if (!registration) {
+      registration = await navigator.serviceWorker.register("/sw.js", {
+        scope: "/",
+      })
+    }
+
+    await navigator.serviceWorker.ready
+
+    const app = initializeApp(firebaseConfig)
+    const messaging = getMessaging(app)
+
+    const permission = await Notification.requestPermission()
+    if (permission !== "granted") {
+      throw new Error("Notification permission denied")
+    }
+
+    // get FCM token
+    const token = await getToken(messaging, {
+      serviceWorkerRegistration: registration,
+    })
+
+    await apiClient.messaging.$post({
+      json: {
+        token,
+        channel: "desktop",
+      },
+    })
+
+    registerPushNotificationPostMessage()
+
+    return token
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new TypeError(`Failed to register push notifications: ${error.message}`)
+    }
+    throw error
+  }
+}
+
+interface NavigateEntryMessage {
+  type: "NOTIFICATION_CLICK"
+  action: "NAVIGATE_ENTRY"
+  data: {
+    feedId: string
+    entryId: string
+    view: number
+    url: string
+  }
+}
+
+type ServiceWorkerMessage = NavigateEntryMessage
+
+const registerPushNotificationPostMessage = () => {
+  navigator.serviceWorker.addEventListener("message", (event) => {
+    const message = event.data as ServiceWorkerMessage
+
+    if (message.type === "NOTIFICATION_CLICK") {
+      switch (message.action) {
+        case "NAVIGATE_ENTRY": {
+          router.navigate(message.data.url)
+          break
+        }
+      }
+    }
+  })
+}

apps/renderer/src/sw.ts

@@ -6,13 +6,109 @@ import { CacheFirst, NetworkFirst } from "workbox-strategies"
 
 declare let self: ServiceWorkerGlobalScope
 
-// 从 Service Worker 的 URL 参数中获取 PWA 状态
 const isPWA = new URL(self.location.href).searchParams.get("pwa") === "true"
 
 self.addEventListener("message", (event) => {
   if (event.data && event.data.type === "SKIP_WAITING") self.skipWaiting()
 })
 
+interface NewEntryMessage {
+  description: string
+  entryId: string
+  feedId: string
+  title: string
+  type: "new-entry"
+  view: string
+}
+
+type Message = NewEntryMessage
+
+// Firebase Cloud Messaging handler
+self.addEventListener("push", (event) => {
+  if (event.data) {
+    const { data } = event.data.json()
+    const payload = data as Message
+
+    switch (payload.type) {
+      case "new-entry": {
+        const notificationPromise = self.registration.showNotification(payload.title, {
+          body: payload.description,
+          icon: "https://app.follow.is/favicon.ico",
+          data: {
+            type: payload.type,
+            feedId: payload.feedId,
+            entryId: payload.entryId,
+            view: Number.parseInt(payload.view),
+          },
+        })
+        event.waitUntil(notificationPromise)
+        break
+      }
+    }
+  }
+})
+
+self.addEventListener("notificationclick", (event) => {
+  event.notification.close()
+
+  const notificationData = event.notification.data
+  if (!notificationData) return
+
+  let urlToOpen: URL
+
+  switch (notificationData.type) {
+    case "new-entry": {
+      urlToOpen = new URL(
+        `/feeds/${notificationData.feedId}/${notificationData.entryId}`,
+        self.location.origin,
+      )
+      break
+    }
+    default: {
+      urlToOpen = new URL("/", self.location.origin)
+      break
+    }
+  }
+
+  const promiseChain = self.clients
+    .matchAll({
+      type: "window",
+      includeUncontrolled: true,
+    })
+    .then((windowClients) => {
+      if (windowClients.length > 0) {
+        const client = windowClients[0]
+        return client.focus()
+      }
+      return self.clients.openWindow(urlToOpen.href)
+    })
+    .then((client) => {
+      if (client && "postMessage" in client) {
+        switch (notificationData.type) {
+          case "new-entry": {
+            client.postMessage({
+              type: "NOTIFICATION_CLICK",
+              action: "NAVIGATE_ENTRY",
+              data: {
+                feedId: notificationData.feedId,
+                entryId: notificationData.entryId,
+                view: notificationData.view,
+                url: urlToOpen.pathname,
+              },
+            })
+            break
+          }
+          default: {
+            console.warn("Unknown notification type:", notificationData.type)
+            break
+          }
+        }
+      }
+    })
+
+  event.waitUntil(promiseChain)
+})
+
 const preCacheExclude = new Set(["og-image.png", "opengraph-image.png"])
 
 const precacheManifest = self.__WB_MANIFEST.filter((entry) => {
@@ -22,7 +118,6 @@ precacheAndRoute(precacheManifest)
 
 cleanupOutdatedCaches()
 
-// 根据 PWA 状态选择固定的策略
 const strategy = isPWA
   ? new CacheFirst({ cacheName: "assets-cache-first" })
   : new NetworkFirst({

package.json

@@ -33,6 +33,7 @@
     "hotfix": "vv -c bump.hotfix.config.js",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
+    "mitproxy": "bash scripts/run-proxy.sh",
     "polyfill-optimize": "pnpx nolyfill install",
     "prepare": "pnpm exec simple-git-hooks && shx test -f .env || shx cp .env.example .env",
     "publish": "electron-vite build && electron-forge publish",

pnpm-lock.yaml

@@ -0,0 +1,6 @@
+from mitmproxy import http
+
+def request(flow: http.HTTPFlow) -> None:
+    if flow.request.pretty_host == "app.follow.is":
+        flow.request.host = "localhost"
+        flow.request.port = 2233