save

.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
+
 

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);
+});

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;

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 };

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);
         });
     });