diff --git a/.env b/.env index b3526e0..f05efef 100644 --- a/.env +++ b/.env @@ -7,4 +7,6 @@ VITE_FIREBASE_APP_ID="1:219982610263:web:0ebe67d9cf0e7d2753c812" VITE_APP_ID=my-closet-app VITE_INITIAL_AUTH_TOKEN= +VITE_FIREBASE_VAPID_KEY=BM55REBdX3g7x4JT7C6sN0uBDLATqsCnvgvx3mJnVmgU2dFvZL1przcV-V-Kl50Ao6-i8OA-5PZFWTuhETL9-v4 + diff --git a/public/firebase-messaging-sw.js b/public/firebase-messaging-sw.js new file mode 100644 index 0000000..d557fef --- /dev/null +++ b/public/firebase-messaging-sw.js @@ -0,0 +1,23 @@ +importScripts('https://www.gstatic.com/firebasejs/10.8.0/firebase-app-compat.js'); +importScripts('https://www.gstatic.com/firebasejs/10.8.0/firebase-messaging-compat.js'); + +// Configuração que o utilizador precisa substituir com os dados reais +firebase.initializeApp({ + apiKey: "REPLACE_WITH_API_KEY", + projectId: "REPLACE_WITH_PROJECT_ID", + messagingSenderId: "REPLACE_WITH_MESSAGING_SENDER_ID", + appId: "REPLACE_WITH_APP_ID" +}); + +const messaging = firebase.messaging(); + +messaging.onBackgroundMessage((payload) => { + console.log('[firebase-messaging-sw.js] Received background message ', payload); + const notificationTitle = payload.notification.title; + const notificationOptions = { + body: payload.notification.body, + icon: '/favicon.ico' + }; + + self.registration.showNotification(notificationTitle, notificationOptions); +}); diff --git a/src/App.jsx b/src/App.jsx index 4fa19d9..a6403a5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -19,7 +19,8 @@ import { deleteDoc, writeBatch, setDoc, getDoc, query, where, getDocs, collectionGroup } from 'firebase/firestore'; -import { auth, db, appId } from './lib/firebase'; +import { auth, db, messaging, appId } from './lib/firebase'; +import { getToken } from 'firebase/messaging'; import { Card } from './components/ui/Card'; import { Badge } from './components/ui/Badge'; import { Input } from './components/ui/Input'; @@ -183,6 +184,21 @@ export default function App() { alert('Permissão recusada. Ative as notificações no browser para usar esta funcionalidade.'); return; } + + // Tentar obter o token FCM se a VAPID Key estiver configurada + if (messaging) { + try { + const vapidKey = import.meta.env.VITE_FIREBASE_VAPID_KEY; + if (vapidKey) { + const currentToken = await getToken(messaging, { vapidKey }); + if (currentToken) { + saveUserSetting('fcmToken', currentToken); + } + } + } catch (err) { + console.error('Erro ao obter token FCM:', err); + } + } } else { alert('O seu browser não suporta notificações.'); return; diff --git a/src/lib/firebase.js b/src/lib/firebase.js index 72499c9..e9a989c 100644 --- a/src/lib/firebase.js +++ b/src/lib/firebase.js @@ -1,6 +1,7 @@ import { initializeApp } from 'firebase/app'; import { getAuth } from 'firebase/auth'; import { getFirestore } from 'firebase/firestore'; +import { getMessaging } from 'firebase/messaging'; const firebaseConfig = { apiKey: import.meta.env.VITE_FIREBASE_API_KEY, @@ -14,7 +15,8 @@ const firebaseConfig = { const app = initializeApp(firebaseConfig); const auth = getAuth(app); const db = getFirestore(app); +const messaging = typeof window !== 'undefined' ? getMessaging(app) : null; const appId = import.meta.env.VITE_APP_ID || 'my-closet-app'; -export { app, auth, db, appId }; +export { app, auth, db, messaging, appId }; diff --git a/src/main.jsx b/src/main.jsx index ee5e78f..855f4ed 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -5,7 +5,7 @@ import './index.css' if ('serviceWorker' in navigator) { window.addEventListener('load', () => { - navigator.serviceWorker.register('/sw.js').catch(err => { + navigator.serviceWorker.register('/firebase-messaging-sw.js').catch(err => { console.error('Service worker registration failed', err); }); });