Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#641 5 commenti 4 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
25/100
Tipo di issue
Bug
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
firebase, javascript
Ambito
frontend, web-dev

Direzione di ricerca

Inizia confrontando la documentazione di Firebase Web Messaging relativa a onMessage(), onBackgroundMessage() e ai clic sulle notifiche con il codice index e lo snippet sw.js forniti. Riproduci il flusso della finestra in background usando Firebase SDK 8.9.1, quindi verifica se il comportamento documentato del callback corrisponde all’aspettativa segnalata e identifica quale chiarimento o modifica al repository è supportata.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
TypeScript
Stelle
5.4k
Fork
3.7k
Merge medio
3g 28m
PR unite (30g)
2

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di firebase/quickstart-js

Tutte le issue di firebase/quickstart-js

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.