From 4e4fddeed365e4d9eb10c8c3bcbc63502c8d0a75 Mon Sep 17 00:00:00 2001 From: guptasiddharth Date: Wed, 4 Jun 2025 16:59:58 +0000 Subject: [PATCH] fcm working --- .firebase/hosting.ZGlzdA.cache | 8 +++++ .firebaserc | 5 +++ .idx/integrations.json | 5 +++ firebase.json | 13 ++++++++ public/firebase-messaging-sw.js | 30 ++++++++++++++++++ src/app.ts | 54 ++++++++++++++++++++++++++------- src/firebase-messaging-sw.js | 19 ++++++++++++ 7 files changed, 123 insertions(+), 11 deletions(-) create mode 100644 .firebase/hosting.ZGlzdA.cache create mode 100644 .firebaserc create mode 100644 .idx/integrations.json create mode 100644 firebase.json create mode 100644 public/firebase-messaging-sw.js create mode 100644 src/firebase-messaging-sw.js diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache new file mode 100644 index 0000000..af34f58 --- /dev/null +++ b/.firebase/hosting.ZGlzdA.cache @@ -0,0 +1,8 @@ +firebase-messaging-sw.js,1749010781804,1fbc621b49bbedae7821942567afa6869010caa2658eb38f7138ba3423a37f81 +index.html,1749010782066,5b13729a5da2e72edfad91b60a6655588b9fe52b4594f59f26653d29a24a3a73 +images/mri.svg,1749010781811,b47195ba28e876b8215d960aa121f60362c7af2055c3d437542848ffface1c26 +images/dog.jpg,1749010781805,ec9fd6332597df6b4dd3b220a81342fe2f52393b5b77aa975c38b5bbbd040bc6 +assets/index-C86DrTEu.css,1749010782065,a62dc5f3af19833e07cb9122a37ff04361aab7ae435e8974ebe0a6ecacc13155 +assets/index-BXlCFT22.js,1749010782065,7d0a6bd0e335e51809aa74ade9d41de6b69093d5cd96a9492e16865e78fc1074 +images/boat.png,1749010781805,fae09835a45262294ff62c7fae71df8aeee3f9545a08f575add24f598e84980b +images/xmas.heic,1749010781821,a5cafec9269f5f593b37f0be0ea76bae1142ac9d1d52e6c683f2595f669c9848 diff --git a/.firebaserc b/.firebaserc new file mode 100644 index 0000000..d404d70 --- /dev/null +++ b/.firebaserc @@ -0,0 +1,5 @@ +{ + "projects": { + "default": "mess-auto" + } +} diff --git a/.idx/integrations.json b/.idx/integrations.json new file mode 100644 index 0000000..3826824 --- /dev/null +++ b/.idx/integrations.json @@ -0,0 +1,5 @@ +{ + "firebase_hosting": { + "deploymentHostingUrl": "https://mess-auto.web.app" + } +} \ No newline at end of file diff --git a/firebase.json b/firebase.json new file mode 100644 index 0000000..0bfd35c --- /dev/null +++ b/firebase.json @@ -0,0 +1,13 @@ +{ + "hosting": { + "public": "dist", + "ignore": [ + "firebase.json", + "**/.*", + "**/node_modules/**" + ], + "frameworksBackend": { + "region": "us-central1" + } + } +} diff --git a/public/firebase-messaging-sw.js b/public/firebase-messaging-sw.js new file mode 100644 index 0000000..9f851ec --- /dev/null +++ b/public/firebase-messaging-sw.js @@ -0,0 +1,30 @@ +// Scripts for firebase and firebase messaging +importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js'); +importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js'); + +// Initialize the Firebase app in the service worker +// "Default" Firebase app is used in the browser +firebase.initializeApp({ + apiKey: "AIzaSyD37s0ZJeXjVUQRhGlO1cKgmGwk0GvbF00", // Replace with your actual apiKey if different + authDomain: "mess-auto.firebaseapp.com", + projectId: "mess-auto", + storageBucket: "mess-auto.firebasestorage.app", + messagingSenderId: "324484105269", + appId: "1:324484105269:web:24f6ce7ea1428397f1dd7c", + measurementId: "G-10W3S7SNZ4" +}); + +// Retrieve an instance of Firebase Messaging so that it can handle background messages. +const messaging = firebase.messaging(); + +messaging.onBackgroundMessage((payload) => { + console.log('[firebase-messaging-sw.js] Received background message ', payload); + // Customize notification here + const notificationTitle = payload.notification.title; + const notificationOptions = { + body: payload.notification.body, + icon: payload.notification.icon, + }; + + self.registration.showNotification(notificationTitle, notificationOptions); +}); diff --git a/src/app.ts b/src/app.ts index 1f785b6..a183144 100644 --- a/src/app.ts +++ b/src/app.ts @@ -8,20 +8,49 @@ import { import { initializeApp } from "firebase/app"; - +import { getMessaging, getToken } from "firebase/messaging"; const firebaseConfig = { - apiKey: "*", - authDomain: "vertexaiinfirebase-test.firebaseapp.com", - projectId: "vertexaiinfirebase-test", - storageBucket: "vertexaiinfirebase-test.firebasestorage.app", - messagingSenderId: "857620473716", - appId: "1:857620473716:web:8c803ada68ede9b2bb6e21" -}; + apiKey: "AIzaSyD37s0ZJeXjVUQRhGlO1cKgmGwk0GvbF00", + authDomain: "mess-auto.firebaseapp.com", + projectId: "mess-auto", + storageBucket: "mess-auto.firebasestorage.app", + messagingSenderId: "324484105269", + appId: "1:324484105269:web:24f6ce7ea1428397f1dd7c", + measurementId: "G-10W3S7SNZ4" + }; // Initialize Firebase const app = initializeApp(firebaseConfig); +// Initialize Firebase Cloud Messaging and get a reference to the service +const messaging = getMessaging(app); + +// Get registration token. Initially this makes a network call, once retrieved +// subsequent calls to getToken will return from cache. +async function requestPermissionAndGetToken() { + try { + const currentToken = await getToken(messaging, { + vapidKey: "BH2rCQkMjwmOTRH9jkjykkmx5xUx25cDweLmL6cTlbJznP_nxtivrycwO4ltmlX3TyiHQjGGjJtZJqADYefGtPE", // Replace with your VAPID key + }); + if (currentToken) { + console.log("FCM Token:", currentToken); + // Send this token to your server (optional) + } else { + // Show permission request UI + console.log('No registration token available. Request permission to generate one.'); + // ... (implement your own UI logic for requesting permission) + } + } catch (err) { + console.log('An error occurred while retrieving token. ', err); + } +} + +// Call this function when you want to request permission and get the token +// For example, on a button click or after the user logs in +// requestPermissionAndGetToken(); + + // Initialize the Vertex AI service // const vertexAI = getVertexAI(app); const vertexAI = getAI(app, { backend: new VertexAIBackend() }); @@ -66,7 +95,7 @@ async function doTextOnlyInference(prompt: string, outputField: HTMLInputElement console.log("inference running for: ", prompt); // TEST: Try with vertexAiHybridModel and googleAiHybridModel - const inferenceRes = await googleAiHybridModel.generateContentStream(prompt); + const inferenceRes = await vertexAiHybridModel.generateContentStream(prompt); for await (const chunk of inferenceRes.stream) { outputField.value += chunk.text(); @@ -93,7 +122,7 @@ async function doTextAndImageInference(prompt: string, imageFile: Blob, outputFi const request = { contents: [{ role: 'user', parts: [{ text: prompt }, inlineImageData] }] } as GenerateContentRequest // TEST: Try with vertexAiHybridModel and googleAiHybridModel - const inferenceRes = await googleAiHybridModel.generateContentStream(request); + const inferenceRes = await vertexAiHybridModel.generateContentStream(request); for await (const chunk of inferenceRes.stream) { outputField.value += chunk.text(); @@ -214,4 +243,7 @@ document.addEventListener('DOMContentLoaded', () => { bTextAndImageInference.addEventListener('click', () => { textAndImageInference(); }); -}); \ No newline at end of file + + // Request permission and get token for FCM + requestPermissionAndGetToken(); +}); diff --git a/src/firebase-messaging-sw.js b/src/firebase-messaging-sw.js new file mode 100644 index 0000000..f188148 --- /dev/null +++ b/src/firebase-messaging-sw.js @@ -0,0 +1,19 @@ +const { default: firebase } = require("firebase/compat/app"); + +// Scripts for firebase and firebase messaging +importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js'); +importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js'); + +const messaging = getMessaging(); + +messaging.onBackgroundMessage(messaging, (payload) => { + console.log('[firebase-messaging-sw.js] Received background message ', payload); + // Customize notification here + const notificationTitle = payload.notification.title; + const notificationOptions = { + body: payload.notification.body, + icon: payload.notification.icon, + }; + + self.registration.showNotification(notificationTitle, notificationOptions); +});