Why am I receiving duplicate push notifications in both PWA and Chrome browser?

I am developing a PWA that uses Push Notifications. The issue I am facing is that when a push notification is sent from the server, the user receives it twice:

Once in the PWA.
Once again in the Chrome browser.
I expect the notification to appear only once.

Here’s the code I’m using in the service worker to handle push events:

     const beamsClient = new PusherPushNotifications.Client({
            instanceId: 'xxxx-xxx-xxx-xxx-xxxxxx-xxxx',
        });

        beamsClient.start()
            .then(() => beamsClient.addDeviceInterest('user-123'))
            .then(() => console.log('Successfully registered and subscribed!'))
            .catch(console.error);

And here’s how I’m registering the service worker:

   importScripts('https://js.pusher.com/beams/service-worker.js');

    self.addEventListener('push', function (event) {
        if (!event.data) {
            console.error('No payload received');
            return;
        }

        const data = event.data.json();


        // نمایش نوتیفیکیشن
        const options = {
            body: data.body || 'پیام جدید!',
            icon: data.icon || '/icon.png',
            badge: data.badge || '/badge.png',
            tag: data.tag || 'notification-tag', // جلوگیری از تکرار
        };

        // جلوگیری از چندین بار نمایش

            event.waitUntil(
                self.registration.showNotification(data.title || 'عنوان پیام', options)
            );


    });

    self.addEventListener('notificationclick', function (event) {
        event.notification.close();
        event.waitUntil(
            clients.openWindow(event.notification.data?.url || '/')
        );
    });

The server is correctly sending the notifications, and I’m confident that the issue is not on the server side.

How can I prevent duplicate notifications from being shown by both the PWA and the Chrome browser?

If more details are needed, let me know.
Thanks in advance for your help!