Register for push notifications

frigate/comms/firebase.py

@@ -32,7 +32,7 @@ class FirebaseClient(Communicator):  # type: ignore[misc]
 
     def publish(self, topic: str, payload: Any, retain: bool = False) -> None:
         """Wrapper for publishing when client is in valid state."""
-        if topic == "review":
+        if topic == "reviews":
             message = messaging.MulticastMessage(
                 notification=messaging.Notification(
                     title="Something happened",

web/public/firebase-messaging-sw.ts

@@ -0,0 +1,34 @@
+// Give the service worker access to Firebase Messaging.
+// Note that you can only use Firebase Messaging here. Other Firebase libraries
+// are not available in the service worker.
+importScripts("https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js");
+importScripts(
+  "https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js",
+);
+
+// Initialize the Firebase app in the service worker by passing in
+// your app's Firebase config object.
+// https://firebase.google.com/docs/web/setup#config-object
+firebase.initializeApp({
+  apiKey: "AIzaSyCoweRLtvai8iNwhsoT-GH_CH_0pckqMmA",
+  authDomain: "frigate-ed674.firebaseapp.com",
+  projectId: "frigate-ed674",
+  storageBucket: "frigate-ed674.appspot.com",
+  messagingSenderId: "76314288339",
+  appId: "1:76314288339:web:090e170610d3bf0966f426",
+  measurementId: "G-GZ1JKNDJZK",
+});
+
+// Retrieve an instance of Firebase Messaging so that it can handle background
+// messages.
+
+messaging.onBackgroundMessage(function (payload) {
+  console.log("Received background message ", payload);
+
+  const notificationTitle = payload.notification.title;
+  const notificationOptions = {
+    body: payload.notification.body,
+  };
+
+  self.registration.showNotification(notificationTitle, notificationOptions);
+});

web/src/hooks/use-firebase.ts

@@ -1,4 +1,5 @@
 import { firebaseConfig } from "@/types/notifications";
+import { getMessaging, getToken } from "firebase/messaging";
 import { initializeApp } from "firebase/app";
 import { useMemo } from "react";
 
@@ -9,3 +10,7 @@ export function useFirebaseApp() {
     return app;
   }, []);
 }
+
+export function useFirebaseMessaging() {
+  return useMemo(() => getMessaging(), []);
+}

web/src/views/settings/NotificationsSettingsView.tsx

@@ -1,14 +1,23 @@
 import { Button } from "@/components/ui/button";
-import { useFirebaseApp } from "@/hooks/use-firebase";
+import { useFirebaseApp, useFirebaseMessaging } from "@/hooks/use-firebase";
+import { getToken } from "firebase/messaging";
 
 export default function NotificationView() {
-  const firebaseApp = useFirebaseApp();
+  useFirebaseApp();
+  const firebaseMessaging = useFirebaseMessaging();
 
   return (
     <div className="flex size-full flex-col md:flex-row">
       <Button
         onClick={() => {
-          firebaseApp.automaticDataCollectionEnabled = false;
+          Notification.requestPermission().then((permission) => {
+            if (permission === "granted") {
+              getToken(firebaseMessaging, {
+                vapidKey:
+                  "BDd7XT7ElEhLApcxFvrBEs1H-6kfbmjTXhfxRIOXSWUIXOpffl_rlKHOe-qPjzp8Gyqv6tgrWX9-xwSTt2ImKPM",
+              }).then((token) => console.log(`the token is ${token}`));
+            }
+          });
         }}
       >
         Enable Notifications