How to get rid of double push?

Question

JavaScript

The site uses firebase notifications. When the pwa app on the phone is in the foreground, everything is fine, pushes come in, but if in the background, then two of them arrive at once. As it turned out, this is due to event handling in the service worker:

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

firebase.initializeApp({
    messagingSenderId: 'ххххххххххххх'
});

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
    // return self.registration.hideNotification();
});

self.addEventListener('push', event => {
    let payload = event.data.json();
let options = payload.notification;
options.data = {};
options.data.url = options.click_action;
let title = options.title;
event.waitUntil(Promise.all([self.registration.showNotification(title, options)]));
});

With background, both push and setBackgroundMessageHandler work. I didn’t understand how to branch them ..
If you disable the firebase libraries, then the push event works in the background and foreground, but if the phone is not touched for a long time, then the push does not come and the phone will be unlocked.
I decided to return the firebase and remove the push handler, as a result, pushes stopped coming to the foreground. Wrote in the body of the page:

messaging.onMessage(function(payload) {
...............
});

to accept push and show. Everything is fine, it accepts, it shows, but notificationclick is no longer processed on the phone. If the push comes in background , then everything is ok and the click can be processed.
How to properly accept push on desktop and phone in background and foreground?