Firebase Push Notifications in Vuejs Quasar app

This is a very basic example for even a beginner to add firebase push notification in vue js and quasar application following this example you can add push notifications in any vue js app using any UI component library i.e Quasar, Vuetify, Bootstrap etc.

Create VueJs Application

Create a vue project with your project name (firebase-notifications is my project name)

vue create firebase-notifications

Open your project in vscode

Add Quasar as a plugin

Add quasar in your project with command

vue add quasar

Serve your project and open with command now quasar is added in your project

npm run serve

Add firebase in your dependencies in package.json

“firebase”: “^6.2.2”

run command in your terminal to install it in project

npm install

Now firebase is added in your project

Create your project in firebase

Go to firebase and add a new project with your desired project name in my case I have named my new project “Test”

Now your project will be created in firebase console.

Open your firebase project

Select web below “Get started by adding Firebase to your app”

Now register your app

Add firebase configurations in application

Once done come back to your vue project in VSCode and create a service worker file with name:

firebase-messaging-sw.js

Note: This file must be included in public folder

and add below code in it

Now add a file with name manifest.json in public folder and add below code in it

Add manifest.json file link in your index.html with below code

<link rel=”manifest” href=”manifest.json”>

Register your service worker file that you added in public folder and this must be done in main.js file

Now we can get token from firebase in our App.vue file as this is the file that runs the first

In created function add this try catch block and import firebase as in line 80, 81

Now if you serve your application you will find that we have received our token in console

Send request from Postman

Now from postman you can send request to firebase console and receive push notification

Method: POST
Request: https://fcm.googleapis.com/fcm/send

Headers:
Content-Type: application/json
Authorization: key=serverKeyHere
(i.e key=AAAAu98LJFM:APA91bGNbjxQ95RELBLAfrdiC99W6dDbG1FGAhsv7p8uWcs9qtggdJYW8xM7Jq-JGAOE0igyu36H7xFw0i0pP6_UAsQCiTU4yA_GBVYiwTLuFifuVcn0jPRePOE-t1SCt2aVBsbP1UGr3XEjTZBDQ9DyIJq4GAT )

Request Payload:
{
"to": "f1BjMWvw144:APA91bHO1-kErhQ77KkaXiE-92BEsA3REyeYaDMHjv-je2NRUpTtZHxmhDCnMhvGbNcAluTTB_Gi-oSsfqMzgd4FI7uN-lsQSGSlUGIggC7Qvz4BCAtyROISzfLMQ5Wlt7FhQFL2rO70",
"data" : {
"username" : "anees.baig.barlas",
"message": "This is a test message"
}
}

Note: Replace token in “to” with token you received from firebase.

Now send Request and you will receive background message.

Note: Background messages are messages that you receive when your app is opened in some tab which is not active. You can get server key from firebase console as shown here

Receive Foreground Push notifications

To receive push notifications when your application is opened you need to create a custom component which will load whenever a new message is received via onMessage function from firebase. Here is a basic component that you may use I am sharing it as an example.

Create a new component NotificationBox.vue

Now add your Notification box component in your App.vue as in picture

Now send a message again from your postman and you will receive notification like this when your application tab is active and in foreground