Estoy usando angular 12 y firebase v9. He estado tratando de implementar FCM con Angular y Django. Me he enfrentado a un problema, tal vez usted también. Podemos usar esta publicación para discutir y llegar a una solución.

Antes de que me digas que hay muchos posts al respecto, déjame decirte que he probado todo lo que hay en internet. Los tutoriales son viejos, los métodos están depreciados. Así que tenemos que empezar de nuevo.

Para empezar, he creado un trabajador de servicio llamado firebase-messaging-sw.js. aquí está el código.

 import { initializeApp } from "firebase/app"; import { getMessaging } from "firebase/messaging"; const firebaseApp = initializeApp({ apiKey: "***", authDomain: "***", databaseURL: "***", projectId: "***", storageBucket: "***", messagingSenderId: "***", appId: "***", measurementId: "***" }); const messaging = getMessaging(firebaseApp);

Entonces manifest.json

 { "gcm_sender_id": "***" }

Agregué ambos en angular.json en activos y manifest.json en index.html, puse el código como:

 <link rel="manifest" href="manifest.json">

Luego llamo al script gettoken en el código del componente es

 const messaging = getMessaging(); getToken(messaging, { vapidKey: '***' }).then((currentToken) => { if (currentToken) { console.log('hey') } else { console.log('No registration token available. Request permission to generate one.'); } }).catch((err) => { console.log('An error occurred while retrieving token. ', err); });

Ahora, después de servir la aplicación desde HTTP o ng serve -ssl

estamos recibiendo el error anterior. Hablemos de esto.

Actualización: he agregado angular/pwa que creó su propio trabajador de servicio y archivo de manifiesto. ¿Debo agregar mi código de base de fuego?

También en la construcción de la aplicación angular/pwa, falló la generación del trabajador del servicio de error.

Tomemos tiempo y resolvamos este problema juntos.