Firebase Serviceworker 发送相同的推送消息两次

Question

我目前正在编写 PWA，但遇到了一个问题：我的 IOS 上的 serviceworker 发送了两次相同的通知，我不明白为什么

这是我的main.js

    // Firebase-Initialisierung in der main.js
const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
};

// Firebase initialisieren
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

let isAppActive = !document.hidden;

// Event-Listener für Sichtbarkeitsänderungen
document.addEventListener('visibilitychange', () => {
    isAppActive = !document.hidden;
    console.log('Sichtbarkeitsstatus geändert:', isAppActive ? 'aktiv' : 'nicht aktiv');
});

// Service Worker nur einmal registrieren
if ('serviceWorker' in navigator && !navigator.serviceWorker.controller) {
    navigator.serviceWorker.register('/firebase-messaging-sw.js')
        .then((registration) => {
            console.log('Service Worker erfolgreich registriert mit Scope:', registration.scope);
            messaging.useServiceWorker(registration);
        })
        .catch((error) => {
            console.log('Service Worker Registrierung fehlgeschlagen:', error);
        });
}

// Funktion zum Anfordern der Benachrichtigungs-Berechtigung
async function requestNotificationPermission() {
    try {
        const permission = await Notification.requestPermission();
        if (permission === 'granted') {
            console.log('Benachrichtigungen erlaubt');
            const currentToken = await messaging.getToken(); // Token vom Messaging-Dienst abrufen
            if (currentToken) {
                console.log('FCM Token:', currentToken);
                // Token zum Backend senden
                await fetch('/save_fcm_token.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ token: currentToken })
                });
            } else {
                console.log('Kein FCM Token erhalten.');
            }
        } else {
            console.log('Benachrichtigungen abgelehnt');
        }
    } catch (error) {
        console.error('Anfrage für Benachrichtigungen fehlgeschlagen:', error);
    }
}

// Event Listener für den Button zum Anfordern der Berechtigung
document.getElementById('notification-btn').addEventListener('click', () => {
    requestNotificationPermission();
});

// Event-Listener für empfangene Nachrichten in der App
messaging.onMessage((payload) => {
    console.log('Nachricht empfangen:', payload);

    // Nachricht nur verarbeiten, wenn die App nicht aktiv ist
    if (!isAppActive) {
        const notificationTitle = payload.notification.title;
        const notificationOptions = {
            body: payload.notification.body,
            icon: 'icons/icon-512.jpg'
        };
        // Benachrichtigung anzeigen
        new Notification(notificationTitle, notificationOptions);
    } else {
        console.log('App ist aktiv. Nachricht nur in der Konsole angezeigt.');
    }
});

这是我的服务人员

importScripts('https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.6.8/firebase-messaging.js');

// Firebase-Konfiguration
const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
};

// Initialisieren von Firebase, nur wenn es noch nicht initialisiert ist
if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
}

const messaging = firebase.messaging();

// Funktion zum Anzeigen der Benachrichtigung und Schließen nach 3 Sekunden
function showNotificationWithDelay(title, body) {
    const notificationOptions = {
        body: body,
        icon: 'icons/icon-512.jpg',
        data: { 
            // Hier kannst du zusätzliche Daten hinzufügen, falls notwendig
        }
    };

    // Alle vorherigen Benachrichtigungen schließen
    self.registration.getNotifications().then(notifications => {
        notifications.forEach(notification => {
            notification.close();
        });

        // Jetzt die neue Benachrichtigung anzeigen
        self.registration.showNotification(title, notificationOptions);

        // Benachrichtigung nach 3 Sekunden schließen
        setTimeout(() => {
            self.registration.getNotifications().then(notifications => {
                notifications.forEach(notification => {
                    if (notification.title === title && notification.body === body) {
                        notification.close(); // Löschen der Benachrichtigung
                    }
                });
            });
        }, 3000);
    });
}

// Benachrichtigungen im Hintergrund verarbeiten
messaging.onBackgroundMessage(function (payload) {
    console.log('Benachrichtigung im Hintergrund empfangen:', payload);

    const notificationTitle = payload.notification.title || 'Neue Benachrichtigung';
    const notificationBody = payload.notification.body || 'Du hast eine neue Nachricht.';

    // Benachrichtigung mit Verzögerung anzeigen
    showNotificationWithDelay(notificationTitle, notificationBody);
});

// Klick-Listener für die Benachrichtigungen
self.addEventListener('notificationclick', function (event) {
    const notification = event.notification;
    event.waitUntil(
        clients.matchAll({ type: 'window', includeUncontrolled: true }).then(clientList => {
            for (const client of clientList) {
                if (client.url === '/' && 'focus' in client) {
                    return client.focus();
                }
            }
            if (clients.openWindow) {
                return clients.openWindow('/');
            }
        })
    );
    notification.close();
});

我问了很多prpbier和chatgpt，但他无法给我一个有根据的答案，因此我希望在这里得到帮助

Answer 1

我也有同样的问题。你找到答案了吗？