How to push notification in NuxtJS with Firebase Cloud Messaging

How to push notification in NuxtJS with Firebase Cloud Messaging

In this post, I'll talk about how to push notification in NuxtJS with Firebase Cloud Messaging.

You need to do those steps to push notification with Firebase Cloud Messaging.

1. Create a Firebase app at https://console.firebase.google.com/ then you create a new web app project to receive info about your firebase web app project.
2. Add firebase package to your project use: yarn add firebase (npm i firebase if you use npm).
3. Add file firebase-messaging-sw.js to the static folder.
4. Add file firebase.js to the plugins folder.
5. Register firebase plugins at plugins block in nuxt.config.js file.

After config firebase cloud messaging for your NuxtJS project. You need to register it in your project and request permission to push notification and send this token for server. In my project, I put it to pages/index.vue like that.

Then request permission success, you can receive data from the server through 2 ways.

1. When project running on an active tab (chrome/safari/firefox...) you use method messaging.onMessage() of firebase/messaging to handle data received. You can update your pages/index.vue like that.
2. When your project offline or running on a nonactive tab browser, you'll receive notification of the browser.

Now, you can test feature push notification with Firebase Cloud Messaging. I hope that I can help you with this post and enjoy it.

Thank you for reading. I so sorry, because I don't good at English.

• Tweet
• Share
• Share
• Share
• Share