diff --git a/frigate/comms/firebase.py b/frigate/comms/firebase.py index cb8fe461e..8946e95a5 100644 --- a/frigate/comms/firebase.py +++ b/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", diff --git a/web/public/firebase-messaging-sw.ts b/web/public/firebase-messaging-sw.ts new file mode 100644 index 000000000..8737368b6 --- /dev/null +++ b/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); +}); diff --git a/web/src/hooks/use-firebase.ts b/web/src/hooks/use-firebase.ts index 8fa04a614..893018995 100644 --- a/web/src/hooks/use-firebase.ts +++ b/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(), []); +} diff --git a/web/src/views/settings/NotificationsSettingsView.tsx b/web/src/views/settings/NotificationsSettingsView.tsx index 63a32761a..18ff2cdc4 100644 --- a/web/src/views/settings/NotificationsSettingsView.tsx +++ b/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 (