Me encontré con un inconveniente/brecha en la configuración de firebase con aplicaciones web (PWA) que no está tan claro en la documentación. Tengo un PWA existente construido en Vue@^2.6.10 y estoy tratando de conectar la mensajería en la nube de Firebase usando firebase@8.10.0. Es bastante fácil configurar mi aplicación para recibir mensajes de firebase cuando la aplicación está activa dentro de una pestaña del navegador usando el siguiente código en mi App.vue en un enlace creado.

 // Includes for the component import firebase from 'firebase/app' import 'firebase/app' import 'firebase/messaging' // Within the created hook firebase.initializeApp({ apiKey: "XXXXXXXXXX_XXXXXXXXXXXXXXXXXXXXX", authDomain: "xxxx.firebaseapp.com", projectId: "xxxx", storageBucket: "xxxxxx.appspot.com", messagingSenderId: "xxxxxxxxxxxx", appId: "x:xxxxxxxxx:web:xxxxxxxxxxx", measurementId: "G-xxxxxxxxxxx" }) const firebaseMessaging = firebase.messaging() firebaseMessaging.getToken() .then((token) => { console.log("Messaging Token: ", token) }) .catch((err) => { console.log("Messaging error: ", err) }) firebaseMessaging.onMessage((payload) => { console.log("Message in app: ", payload) })

Mientras el PWA está activo dentro de una ventana/pestaña del navegador, puedo enviar con éxito un mensaje curl a mi aplicación.

 curl -X POST --header "Authorization: key=XXXXXXXXXXXX" --Header "Content-Type: application/json" https://fcm.googleapis.com/fcm/send -d '{"to":"XXXXXXXXXXXXX","notification":{"title":"Hello","body":"World","icon":"image/mstile-150x150.png"}}'

Sin embargo, si trato de configurar el PWA para recibir notificaciones a través del trabajador del servicio de Firebase, es cuando parece que falta contexto en la documentación. A continuación se muestra la configuración recomendada del trabajador de servicio de los documentos de Firebase que estoy usando.

 // 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.0/firebase-app.js'); importScripts('https://www.gstatic.com/firebasejs/8.10.0/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: "xxxxx_xxxxxxxxxxxxxxx", authDomain: "xxxx.firebaseapp.com", projectId: "xxxx", storageBucket: "xxxx.appspot.com", messagingSenderId: "xxxxxxxxxxx", appId: "x:xxxx:web:xxxxxxxxxx", measurementId: "G-xxxxxxxxxxx" }); // Retrieve an instance of Firebase Messaging so that it can handle background // messages. const messaging = firebase.messaging();

Para un sitio web estándar sin un trabajador de servicio existente, parece que esta configuración debería ser suficiente, sin embargo, dado que estoy vinculando una PWA existente con un trabajador de servicio existente, parece que necesito registrar la configuración de firebase con la configuración de PWA existente en mi solicitud. Por lo que he encontrado hasta ahora, la configuración adecuada de ese vínculo es la siguiente.

 if ("serviceWorker" in navigator) { wb = new Workbox(`${process.env.BASE_URL}service-worker.js`) wb.addEventListener("controlling", () => { window.location.reload() }) wb.register() wb.register("./firebase-messaging-sw.js") .then(function(registration) { console.log("Registration successful, scope is:", registration.scope); }) .catch(function(err) { console.log("Service worker registration failed, error:" , err ); }) } else { wb = null }

Por lo que parece, esto registra con éxito la configuración de Firebase con mi trabajador de servicio existente.

Sin embargo, aunque el registro parece exitoso desde el principio, en realidad no se relaciona con el trabajador del servicio. Al hacer clic fuera de la pestaña del navegador activo de PWA en esta configuración, el trabajador del servicio no recibe una notificación cuando realiza el mismo curl anterior. Por todo lo que puedo decir hasta ahora en los documentos, la PWA debería recibir la notificación y activar una notificación predeterminada del navegador para el evento; sin embargo, ese no es el caso. No se recibe ninguna notificación a pesar de que la notificación se envió correctamente a través de la API de Firebase dada la respuesta de su API:

 {"multicast_id":3069325822032476405,"success":1,"failure":0,"canonical_ids":0,"results":[{"message_id":"88f73357-6a0e-416d-8417-67608437f84d"}]}%

Por lo tanto, estoy al final del camino en términos de qué documentación e hilos puedo encontrar sobre este tema hasta ahora. Parecería que no hay un gran ejemplo de cómo hacer esta configuración correctamente cuando se conecta a un trabajador de servicio existente. Agradezco mucho a cualquier persona con experiencia en este tema que brinde su opinión sobre las configuraciones que ha hecho que funcionen con Firebase y Service Worker en PWA.

¡Muchas gracias!