notificationClick does not work as expected if original url is open

[altendorfme]

Operating System

Windows 11

Environment (if applicable)

132.0.6834.159

Firebase SDK Version

10.14.0

Firebase SDK Product(s)

Messaging

Project Tooling

Javascript

Detailed Problem Description

In the serviceWorker of a webpush, if a tab of the site where the webpush is open, when clicking on the notification it only goes to the tab, but does not redirect to the push link.

If I put notificationclick before const messaging = firebase.messaging();, it works, but then I don't have data on the correct push URL.
It has already been tested on SDK 11.2.0 as well and the error is the same.

// Firebase Cloud Messaging Service Worker
importScripts('https://www.gstatic.com/firebasejs/10.14.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.14.0/firebase-messaging-compat.js');

// Consistent unique identifier
const SERVICE_WORKER_ID = 'XYZ';

// Firebase configuration
const firebaseConfig = {
    apiKey: "XYZ_XYZ",
    authDomain: "XYZ.firebaseapp.com",
    projectId: "XYZ",
    storageBucket: "pXYZ.firebasestorage.app",
    messagingSenderId: "XYZ",
    appId: "1:XYZ:web:XYZ"
};

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

// Advanced duplicate prevention with localStorage
const NOTIFICATION_STORAGE_KEY = 'pushbase_recent_notifications';
const ACTIVE_SW_KEY = 'pushbase_active_service_worker';

// Ensure only one service worker is active
function checkServiceWorkerSingleton() {
    const now = Date.now();
    const activeWorker = JSON.parse(localStorage.getItem(ACTIVE_SW_KEY) || '{}');

    // If no active worker or worker is old, claim this one
    if (!activeWorker.id || (now - activeWorker.timestamp > 60000)) {
        localStorage.setItem(ACTIVE_SW_KEY, JSON.stringify({
            id: SERVICE_WORKER_ID,
            timestamp: now
        }));
        return true;
    }

    // If another worker is active, do not process
    return activeWorker.id === SERVICE_WORKER_ID;
}

function storeNotification(notificationKey) {
    try {
        const now = Date.now();
        const recentNotifications = JSON.parse(localStorage.getItem(NOTIFICATION_STORAGE_KEY) || '[]');

        // Remove old notifications (older than 5 minutes)
        const filteredNotifications = recentNotifications.filter(
            item => now - item.timestamp < 5 * 60 * 1000
        );

        // Add new notification
        filteredNotifications.push({
            key: notificationKey,
            timestamp: now
        });

        localStorage.setItem(NOTIFICATION_STORAGE_KEY, JSON.stringify(filteredNotifications));
    } catch (error) {
        console.error('Error storing notification:', error);
    }
}

function isDuplicateNotification(payload) {
    try {
        const now = Date.now();
        const notificationKey = JSON.stringify({
            title: payload.notification?.title,
            body: payload.notification?.body,
            data: payload.data
        });

        const recentNotifications = JSON.parse(localStorage.getItem(NOTIFICATION_STORAGE_KEY) || '[]');

        // Check for duplicate within last 5 minutes
        const isDuplicate = recentNotifications.some(
            item => item.key === notificationKey && now - item.timestamp < 5 * 60 * 1000
        );

        return isDuplicate;
    } catch (error) {
        console.error('Error checking duplicate notification:', error);
        return false;
    }
}

// Intercept and filter background messages
messaging.onBackgroundMessage((payload) => {
    // Ensure only one service worker processes the message
    if (!checkServiceWorkerSingleton()) {
        console.log('Skipping notification - another service worker is active');
        return;
    }

    console.log('Raw payload received:', payload);

    // Check for duplicate notification across all browser contexts
    if (isDuplicateNotification(payload)) {
        console.log('Blocked duplicate notification');
        return;
    }

    // Store notification to prevent duplicates
    const notificationKey = JSON.stringify({
        title: payload.notification?.title,
        body: payload.notification?.body,
        data: payload.data
    });
    storeNotification(notificationKey);

    // Extract notification details
    const notification = payload.notification || {};
    const data = payload.data || {};
    const fcmOptions = payload.webpush.fcm_options || {};

    // Prepare notification options
    const notificationOptions = {
        body: notification.body || data.body || 'New notification',
        icon: notification.icon || data.icon || '/public/assets/pushbase.svg',
        badge: notification.badge || data.badge || '/public/assets/pushbase.svg',
        tag: SERVICE_WORKER_ID, // Use consistent tag

        // Advanced configuration
        requireInteraction: notification.requireInteraction || data.requireInteraction || false,
        renotify: false, // Prevent renotification
        silent: notification.silent || data.silent || false,

        // Additional metadata
        data: {
            url: fcmOptions.link || notification.click_action || data.url,
            campaignId: data.campaignId,
            segmentId: data.segmentId,
            type: data.type,
            swId: SERVICE_WORKER_ID
        }
    };

    // Optional image
    if (notification.image || data.image) {
        notificationOptions.image = notification.image || data.image;
    }

    // Show unique notification
    self.registration.showNotification(
        notification.title || data.title || 'PushBase Notification',
        notificationOptions
    );
});

// Notification click handler
self.addEventListener('notificationclick', (event) => {
    event.notification.close();

    const notificationData = event.notification.data;

    // Open URL or default
    event.waitUntil(
        clients.openWindow(
            notificationData.url || '/teste2'
        )
    );
});

// Ensure single service worker instance
self.addEventListener('install', (event) => {
    self.skipWaiting(); // Take over immediately
});

self.addEventListener('activate', (event) => {
    event.waitUntil(self.clients.claim());
});

Steps and code to reproduce issue

Send push, receive push, click and not open correct url!

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[dlarocque]

Hi @altendorfme, please share more information about the app's environment and tooling.
Is the app build with NextJS, React Native, or Expo? Does it use any other push notification services?
Does this issue occur in a desktop Browser, mobile browser, or a PWA? This information could really help us identify the source of the issue.

[altendorfme]

Hi!

PureJS, Windows 11/Chrome.

After a lot of research, the only alternative I was able to solve was to change onBackgroundMessage to push, the solution below works as expected:

"use strict";

const SERVER_API_URL = "https://SERVER";
const SOURCE_PUSH = "key";
const SERVICE_WORKER_VERSION = "1.0.0";

// Enhanced logging function
function log(message, level = 'info') {
    const timestamp = new Date().toISOString();
    const logLevels = {
        'info': console.log,
        'warn': console.warn,
        'error': console.error
    };
    (logLevels[level] || console.log)(`[${timestamp}] [ServiceWorker v${SERVICE_WORKER_VERSION}] ${message}`);
}

// Helper function to show error notification
function showErrorNotification() {
    log('Showing error notification', 'warn');
    return self.registration.showNotification("Notification Error", {
        body: "Sorry, the notification could not be displayed due to an ad blocker or network connection issue.",
        icon: '/assets/push.svg',
        tag: "notification-error",
        requireInteraction: false
    });
}

// Helper function to handle push event
async function handlePushEvent(event) {
    try {
        const data = event.data?.json();
        if (!data) {
            log('No data in push event', 'error');
            return showErrorNotification();
        }

        log(`Received push event data: ${JSON.stringify(data)}`, 'info');

        // Flexible payload extraction with improved error handling
        const notification = data.notification || {};
        const subscriber = data.subscriber || {};
        const campaign = data.campaign || {};

        if (!notification.title) {
            log('No valid notification payload found', 'error');
            return showErrorNotification();
        }

        // Construct notification options with extensive fallback and validation
        const notificationOptions = {
            body: notification.body || 'New notification',
            icon: notification.icon || '/assets/push.svg',
            badge: notification.badge || '/assets/push`.svg',
            data: { 
                redirectUrl: notification.click_action || '/',
                taskId: notification.uuid || Date.now(),
                source: SOURCE_PUSH
            },
            image: notification.image || '',
            tag: notification.tag || `push-${Date.now()}`,
            requireInteraction: !!notification.requireInteraction
        };

        // Optional: Add actions if available and valid
        if (Array.isArray(notification.actions)) {
            notificationOptions.actions = notification.actions.map(action => ({
                action: action.action,
                title: action.title
            }));
        }

        // Show notification
        return self.registration.showNotification(
            notification.title || 'Notification', 
            notificationOptions
        );

    } catch (error) {
        log(`Critical error in handlePushEvent: ${error.message}`, 'error');
        return showErrorNotification();
    }
}

// Event listener for install event
self.addEventListener("install", (event) => {
    log('Service worker installing', 'info');
    event.waitUntil(self.skipWaiting());
});

// Event listener for activate event
self.addEventListener("activate", (event) => {
    log('Service worker activating', 'info');
    event.waitUntil(self.clients.claim());
});

// Event listener for push event
self.addEventListener("push", (event) => {
    log('Push event received', 'info');
    event.waitUntil(handlePushEvent(event));
});

// Event listener for notification click event
self.addEventListener("notificationclick", (event) => {
    const { notification, action } = event;
    let redirectUrl = notification.data.redirectUrl || '/';

    // Handle action-specific redirects
    if (action && notification.actions) {
        const button = notification.actions.find((btn) => btn.action === action);
        if (button && button.url) {
            redirectUrl = button.url;
        }
    }

    // Close the notification
    notification.close();

    // Open or focus a window
    event.waitUntil(
        clients.matchAll({ type: "window" }).then((clientList) => {
            // Try to find an existing client
            const focusedClient = clientList.find((client) => 
                client.url === redirectUrl && "focus" in client
            );

            if (focusedClient) {
                return focusedClient.focus();
            }

            // If no existing client, open a new window
            if (clients.openWindow) {
                return clients.openWindow(redirectUrl);
            }
        })
    );
});

// Optional: Handle sync events if needed
self.addEventListener('sync', (event) => {
    log(`Background sync event: ${event.tag}`, 'info');
    // Implement any background sync logic here
});

[dlarocque]

@altendorfme I'm glad you were able to find a solution.

After looking into some related issues, I believe this issue is a duplicate of #3922. This issue reports that after clicking a notification with a link, the browser will redirect to the existing tab, but will not open the link. A user shared a solution to the issue in #3922 (comment).

Is this the same issue you're experiencing? If so, I will mark this issue as a duplicate and close it. Otherwise, could you explain why this is a separate issue?

[altendorfme]

Hmm! It seems like that, anyway there are two ways to do it now haha!