Firebase API is not sending notification in background

I'm creating web app using Django, and trying to send push notification via firebase API. It's working when user is on page that registers firebase-messaging-sw.js, but in background no notification is coming, even though no error was raised.

def send_fcm_notification(device_token, title, body, data=None, click_action=None):
    headers = {
        "Authorization": f"Bearer {get_access_token()}",
        "Content-Type": "application/json",
    }

    data = {
        "message": {
            "token": device_token,  # Use "topic": "your-topic" to send to a topic
            "notification": {
                "title": title,
                "body": body,
            },
                "data": data or {},
            "android": {
                "priority": "high"
            },
            "apns": {
                "payload": {
                    "aps": {
                        "alert": {
                            "title": title,
                            "body": body
                        }
                    }
                }
            }
        }
    }

    response = requests.post(FCM_ENDPOINT, headers=headers, data=json.dumps(data))
    return response.json()

SW

importScripts("https://www.gstatic.com/firebasejs/11.2.0/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/11.2.0/firebase-messaging-compat.js");

// Firebase Configuration (Same as in your main script)
const firebaseConfig = { 
//myconfig data
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
self.addEventListener('notificationclick', (event) => {
    event.notification.close(); // CLosing the notification when clicked
    const urlToOpen = event?.notification?.data?.url || 'https://www.test.com/';
    // Open the URL in the default browser.
    event.waitUntil(
      clients.matchAll({
         type: 'window',
      })
      .then((windowClients) => {
         // Check if there is already a window/tab open with the target URL
         for (const client of windowClients) {
            if (client.url === urlToOpen && 'focus' in client) {
              return client.focus();
            }
         }
         // If not, open a new window/tab with the target URL
         if (clients.openWindow) {
            return clients.openWindow(urlToOpen);
         }
      })
    );
 });
// Handle background notifications
messaging.onBackgroundMessage((payload) => {
    console.log("Received background message:", payload);

    self.registration.showNotification(payload.notification.title, {
        body: payload.notification.body,
        icon: payload.notification.image || "/static/img/favicon.ico",
          data: { url: payload?.data?.url || 'https://www.test.com/'},
    });
});

index.html

<script type="module">
        // Import Firebase SDK
        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.2.0/firebase-app.js";
        import { getMessaging, getToken, onMessage } from "https://www.gstatic.com/firebasejs/11.2.0/firebase-messaging.js";
    
        // Firebase Configuration
        const firebaseConfig = { 
            //my config data
        };
    
        // Initialize Firebase
        const app = initializeApp(firebaseConfig);
        const messaging = getMessaging(app);
    
        // Get CSRF token from Django cookies
        function getCSRFToken() {
            const cookieValue = document.cookie
                .split('; ')
                .find(row => row.startsWith('csrftoken='))
                ?.split('=')[1];
            return cookieValue || '';
        }
    
        // Register Firebase Service Worker
        navigator.serviceWorker.register("/static/firebase-messaging-sw.js")
            .then((registration) => {
                console.log("Service Worker registered:", registration);
    
                // Request Notification Permission
                Notification.requestPermission().then(permission => {
                    if (permission === 'granted') {
                        console.log("Notification permission granted.");
                        
                        // Get FCM Token
                        getToken(messaging, { 
                            vapidKey: 'MY-VAPIDKEY', 
                            serviceWorkerRegistration: registration  // Required for service worker
                        }).then((currentToken) => {
                            if (currentToken) {
                                console.log("FCM Token:", currentToken);
    
                                // Send the token to Django backend
                                fetch('/register-device/', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRFToken': getCSRFToken(),  
                                    },
                                    body: JSON.stringify({
                                        token: currentToken,
                                        platform: 'web'
                                    })
                                }).then(response => response.json())
                                  .then(data => console.log("Token registered:", data))
                                  .catch(error => console.error("Error sending token:", error));
                            } else {
                                console.log("No registration token available.");
                            }
                        }).catch((err) => {
                            console.log('Error getting token:', err);
                        });
    
                    } else {
                        console.log("Notification permission denied.");
                    }
                });
    
            }).catch((err) => {
                console.log("Service Worker registration failed:", err);
            });
    
        // Handle Incoming Foreground Messages
        onMessage(messaging, (payload) => {
            console.log('Foreground message received:', payload);
    
            // Show a real notification when a message arrives
            new Notification(payload.notification.title, {
                body: payload.notification.body,
                icon: payload.notification.image || "/static/img/favicon.ico"
            });
        });
    
    </script>

I think only reason why it is working while page is open is onMessage function in index.html

Вернуться на верх