Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

onMessage() not fired when app is in background (Web javascript).

Abierto
  • ¿Algo no está bien?
#641 5 comentarios 4 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
25/100
Tipo de issue
Error
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
firebase, javascript
Área
frontend, web-dev

Línea de trabajo

Comienza comparando la documentación de Firebase Web Messaging sobre onMessage(), onBackgroundMessage() y los clics en notificaciones con el código index y el fragmento sw.js proporcionados. Reproduce el flujo de la ventana en segundo plano usando Firebase SDK 8.9.1 y verifica después si el comportamiento documentado del callback coincide con la expectativa comunicada, e identifica qué aclaración o cambio en el repositorio está respaldado.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

I building a simple demo chat app with fcm integrated for new message notification. As far as I know, in fcm doc regarding onMessage(), it said this method get called when:
(1) a message is received while the app has focus
(2) - the user clicks on an app notification created by a service worker messaging.onBackgroundMessage handler.

But I'm not sure why onMessage() callback is not fired when my app is in background.

Step 1: Describe your environment
  • Operating system: OSX Big Sur
  • Browser: All
  • Firebase SDK version: 8.9.1
Step 2: Describe the problem:

onMessage() callback is not fired when my app is in background.

Steps to reproduce:
  1. hide current browser window to make it in background state.
  2. send test message.
Observed Results:

onBackgroundMessage() from sw.js get called fine, but when I clicked on the notification to land on my app window, onMessage() did not get triggered (it's only triggered when the current browser window is in foreground state). It did not show any error or warning.

Expected Results:

onMessage() should be fired after I clicked the notification to have my app focused.

Relevant Code:

this is my index file

const messaging = firebase.messaging();

    function sendTokenToServer(fcm_token) {
        let player_sn = '{{Auth::id()}}';
        axios.post('api/save-token', {
                fcm_token,
                player_sn
            })
            .then(function(response) {
                // console.log(response);
            })
            .catch(function(error) {
                console.log(error);
            });
    }

    messaging.getToken({
        vapidKey: '{{config("fcm.VAPID")}}'
    }).then((currentToken) => {
        // console.log(currentToken)
        if (currentToken) {
            sendTokenToServer(currentToken)
        } else {
            // Show permission request UI
            console.log('No registration token available. Request permission to generate one.');
            // ...
        }
    }).catch((err) => {
        console.log('An error occurred while retrieving token. ', err);
        // ...
    });

    messaging.onMessage((payload) => {
        console.log('onMessage');
        console.log(payload)
    });

this is my sw.js

importScripts('https://cdnjs.cloudflare.com/ajax/libs/firebase/8.10.1/firebase.js');
importScripts('https://cdnjs.cloudflare.com/ajax/libs/firebase/8.10.1/firebase-messaging.min.js');

const firebaseConfig = {

    apiKey: "AIzaSyBE90OnfKk6MELQ2-Z_DVLYp4maXVzvQO8",

    authDomain: "ninja-firestore-tut-nov11.firebaseapp.com",

    databaseURL: "https://ninja-firestore-tut-nov11-default-rtdb.asia-southeast1.firebasedatabase.app",

    projectId: "ninja-firestore-tut-nov11",

    storageBucket: "ninja-firestore-tut-nov11.appspot.com",

    messagingSenderId: "28680409583",

    appId: "1:28680409583:web:66bef6c94232b88816e61a"

};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
messaging.onBackgroundMessage((payload) => {
    console.log('onBackgroundMessage ', payload);
    // Customize notification here
     const {title, body} = payload.notification;
     const notificationTitle = title;
     const notificationOptions = {
         body: body,
         icon: '/firebase-logo.png'
     };
    // self.registration.showNotification(notificationTitle,
    //     notificationOptions);



});

Note: I need to comment self.registration.showNotification(notificationTitle, notificationOptions); to avoid the notification got duplicate.

Any help on this would be much appreciated...
Thank you.

Lenguaje dominante
TypeScript
Estrellas
5.4k
Forks
3.7k
Merge medio
3 d 28 min
PR fusionados (30 d)
2

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de firebase/quickstart-js

Todos los issues de firebase/quickstart-js

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.