Push notification comes twice

[artrayd]

By some reason push notifications appears twice, I'm sending it via firebase Cloud Messaging interface.

Version

@nuxtjs/firebase: 7.4.1
firebase: 8.2.7
nuxt: 2.14.12

Steps to reproduce

// nuxt.config.js
      messaging: {
        createServiceWorker: true,
        fcmPublicVapidKey:
          'MY-KEY', // OPTIONAL : Sets vapid key for FCM after initialization
        inject: fs.readFileSync('./js/push.js', 'utf8'),
      },

// push js
self.addEventListener('push', function (e) {
  const data = e.data.json()

  const title = data.notification.title
  const options = {
    body: data.notification.body,
    icon: './icon-for-push.png',
    data: {
      dateOfArrival: Date.now(),
      primaryKey: '2',
      url: data.data.url,
      tag: 'noty-1',
      click_action: data.data.url,
    },
  }
  e.waitUntil(self.registration.showNotification(title, options)) 
})

Send Push notification via Firebase Cloud messaging web ui

What is Expected?

Push notification should come just once

What is actually happening?

Notification comes twice

I found this topic at stack overflow, but after 3 hours of tries and struggling nothing helped to solve this problem(

[lupas]

Hey @artrayd

Weird, doesn't happen to me. Could you reproduce a minimal example on codesandbox.io ?

Not sure if it is related to this module though. Same on all browsers?

[artrayd]

Hi @lupas, thank you for answering.

I started to create a minimal example on codesandbox.io and realized that to test this, and you will need to apply all your firebase keys. And I'm afraid to post all this information in a public place. I already solved this problem on the server level, but I would prefer to do this on the front end.

It's a common problem that happened not only for me, and I checked that only for the Chrome browser. Here is also stackoverflow question with the same problem

Now, after I understand the issue better, I will try to give a better explanation.

Firebase supports two types of push notifications:

• Display notifications that FCM SDK handles automatically
• Data messages, which are handled by the client app.

Firebase cloud messaging UI has many advantages like advanced targeting by countries, devices, languages, and more. But it allows sending URLs only inside the data custom field.

The issue that it sends display notification looks this way:

 {
    notification: {
      title: "New Test",
      body: "This is test",
    },
    data: {
      url: 'someurl.com',
    },
  };

The notification comes twice when the service worker handles it and a second time when FCM SDK automatically does it.

I didn't found a way to disable auto handling of notification and in the frontend and in the end of the day, I used Firebase Functions to send it only as data message:

 {
    data: {
      title: "New Test",
      body: "This is test",
      url: 'someurl.com',
    },
  };

If that could be possible to disable automatic handling of notifications, that could great.

[lupas]

Hey @artrayd

You can also disable (or not enable) our example service worker by setting the createserviceworker to false and write your own service worker with your code.

Our example service working / action option is just simple option for basic usage, if you have more complex use cases we always advice to just create your own service worker and register it.
After all, createServiceWorker: true without using the "action" option doesn't really do much anyway.

[artrayd]

Hi, @lupas thank you for your answer.

Actually, I tried to create a custom service worker, but for some reason it didn't work :(

Here is an issue I opened
nuxt-community/pwa-module#467